I hope the title is accurate enough to portray the problem that I'm facing.
I have a div (tried multiple different things: a, span, button, all face the same problem) that when it is clicked the onclick event will not fire, even though the css div:active will be called.
This appears to be due to the fact that in the div:active I set top: 6px to make a "push down" sort of effect. The effect looks nice, it's just that sometimes, if you click towards the top of the element, or in the center for some reason, the div will appear to "move out" of the way and not call the onclick event.
I thought that a good solution would be to wrap the element in another div then, and attach the onclick event to that div. To my surprise though, the clicks didn't fire towards the top or the middle of the button still.
If I remove top: 6px at the bottom of the div:active, the button works fine, it just doesn't have the same "pushed in" effect.
I'm finding it kind of difficult to explain, so here's a screenshot (the blue areas are where the onclick won't fire):
and here's the code for the initial attempt: http://jsfiddle.net/RS5Q5/6/
and the code for moving the onclick listener outside: http://jsfiddle.net/RS5Q5/4/ (onclick will fire everywhere in the div except the blue parts on the picture)
It's also worth noting that the middle and bottom blue areas appear to click fine in firefox, but not chrome or safari. The top blue area is still a problem.
Any fix or explanation to this strange behavior? Any guidance at all would be appreciated. Thank you.
Might be because the browser gets confused when content moves during a click event. This usually happens because the user presses the mouse button then drags before releasing, but I suppose the same would be true if the content itself moved under the click location.
What happens if you use the mousedown/mouseup events instead of click?
Related
When having a button (or any other element, positioned absolute or fixed) on top of an element with a scrolling area which is actively scrolling (i.e. for example it's decelerating) it seems that the button doesn't receive the click event when clicked.
It seems that when clicking (or touching) the scrollable element area, the scrolling is interrupted, but the button on top of it doesn't receive any event.
I've debugged events for the floating element in Chrome and the only thing received is a mousewheel event.
This is particularly annoying if the button is a navigation button, as you have to click twice to exit the page if the content is decelerating (as opposed to once when the content is still).
I browsed many times for a solution but never found a clue about this behaviour and how to avoid it, so any thoughts will be appreciated.
Sample code here: https://codepen.io/djibarian/pen/bGLoYxY
If you scroll the red box and while still scrolling due to inertia try to click the button, you only manage to stop the scrolling in the box, but the button doesn't receive the click event.
I haven't seen your code, but it's worth checking following.
Check if any element overlaps the positioned fixed element.
Make sure the stacking context of the element is correct.
Try adding a higher z-index and see if it's working. If it works then it's worth changing the dom element order for precedence.
I have the following scenario: I have a few divs embedded in eachother, the main div has position:absolute, and floats happily somewhere in the middle of the screen.
The issue is that this main div is supposedly invisible in the beginning.
If I hover over a menu point, it appears. This main div also has submenus, which also make other things appear-disappear, depending where the mouse is.
The strange part: On everything else, this works perfectly, but for some reason on IE 11, whenever one of the submenus child ul-s gets the display: block from the mouse over event listener, the main div decides just to disappear.
The fun part is, that the main div still has display: block in it. If I manually remove it, and re-add it, it reappers! But I cannot make both the submenu, and the main div make appear.
Anyone has experience regarding this? I tried searching the web whole and wide, and I cannot see any answers.
Oh, one more additional detail, it usually works regardless, but sometimes don't, only if the user is zoomed in (zoom > 125%) it does this with 100% accuracy. I really hate IE.
I have a main content in front, a menu absolutely positioned in back and a toggle button which slides the menu in/out (using CSS transformation on main content).
The problem happens on older (2.x) Android browsers (and sometimes somewhere else). When I click the toggle button to close the menu, the click event is "captured" for a while and than it is repeated on the same position as if no transformation were applied on the content. This leads to activating the link in the content, which is undesired.
Demo is here. Use older Android default browser to see the problem. When you open the menu (the icon in the upper left corner) and then close it by clicking the same icon, the page reloads (as if you clicked the link in upper right corner).
I figured, that my events were bind badly. In case of anyone would have the same problem in future, be careful when binding both: touch events and click events. Touch event was fired first in my case, then the transformation happened followed by the click, which led to "duplicating" the event.
I have an info overlay that works great in Chrome and FF. It is a div containing a table (for border image layout) and then a central content div. I trigger mousedown on the appropriate border table cells.
Once this happens, a different div is brought to the front with z-index, and that passes along the mousemove and mouseup events to handle dragging the info bubble around. Once the mouseup is fired, the info bubble puts the "event" div back to where it was.
I also follow the same process for dragging the lower right corner of the bubble to resize it. Again, works in Chrome and FF, but fails in IE.
IE seems to be restricting the event triggers to the info div. If the mouse manages to move outside the div (from dragging faster then the events fire/update), the info overlay no longer receives mousemove events. However, if I move the mouse back over the overlay (without releasing the button) it continues to receive mouse events.
Edit: In creating some example code (the current functionality is split across several JS modules), it worked in IE. As soon as I find the difference between my example code and the actual code, I will update again.
Edit/Answer: (SO wont let a new user answer their own question in this time span...)
Still not sure what the actual problem was. (If you ask me, a div with a z-index of 100 should be receiving mouse events just fine?)
My solution was to fix my mouse event handling such that I could attach my mousemove and mouseup to the parent div (as should have been done in the first place) for all dragging/resizing behaviors I wanted to set up.
The problem was due to a newbie approach to the events and having stopPropagation() in too many locations preventing me from taking such an approach. (I wanted text, etc in my info box to be selectable).
I adjusted the code so that my text containers only had to stop propagation on mousedown instead of all the mouse events.
I have an absolutely positioned div on which I am trying to trigger mouseenter and mouseleave events. In IE8/7 with the background-color of the div left unspecified (so that it defaults to transparent), the mouseenter/leave events are not firing when the cursor crosses the div's boundary, only somewhere in the middle of the div and when the cursor is over any text within the div.
When I attempt to debug the problem by adding a background color to the div (e.g. background-color: green), the problem magically goes away. The div's box model is honored perfectly and mouseenter/leave fire as when expected. It's only when the div's background color is left unspecified (or even explicitly set to transparent) that it doesn't behave correctly.
Any ideas? Googling for this IE bug/quirk is coming up with nothing.
The mouseenter and mouseleave are not registering until the cursor hits something visible. This is not correct behavior, but this is Explorer we're dealing with.
Two possible solutions:
Put a thin border on the DIV, one that matches whatever is behind it and won't be noticed. (This doesn't work; see the comments.)
Track mousemove events and have your code determine when the mouse has entered the area of interest.
(Added; see the comments.) Make your background a tiled transparent 1x1 image.
Both solutions are pretty much yuck, unfortunately.
Edit: Question: Do mouseover and mouseout show the same weird behavior?
To add to this: onclick fires as well when using Solution 3, in the answer above. It's overall a nice workaround for grabbing clicks on transparent elements over non-transparent ones in IE.