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.
Related
There is one div that is always wider than the page have available space for it. It is placed in a container with overflow-x: visible, which in turn is placed in a flex container.
So, with this layout, if you click on this div and then press the left-right arrows on the keyboard, the container will scroll. This is the expected behavior.
Now I need to add an onKeyDown event handler to change the contents of the div when certain buttons on the keyboard are pressed (including left-right arrows). In order for the onKeyDown event to work, you need to add tabIndex=0 for this block. But when I have the tabIndex added, the container stopped scrolling when the right-left arrows are pressed.
And this is not the expected behavior. I expect that scrolling the container with the left-right arrows from the keyboard will continue to work even if we started listening for keystroke events.
Probably, event.preventDefault() should be called to cancel this scrolling effect, but in this particular case I'm not calling this function.
Am I doing something wrong or maybe there is some bug in React?
Here is the code on CodeSandbox that demonstrates the problem:
https://codesandbox.io/s/onkeydown-arrow-scroll-problem-97e00l
EDIT1. Moreover, it looks like my "expected behavior" works in Chrome, Edge, but doesn't work in Firefox.
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.
This issue only occurs in IE11 on Hybrid devices like Surface Pro 3!
I have a function that creates an Open and Close menu, which moves a DIV to the right and/or left.
The DIV contains elements with binded events, but when the elements move there is almost a shadow element of the previous position that remains active with the binded events attached to it?
If I click on that shadow then IE repositions the events on the right elements, as illustrated in the below picture.
Any ideas?
The problem was due to using animation, CSS translate3d.
I've changed it to translate and it works fine now.
I've written a simple script that displays circles over an image.
When you hover over a circle it expands to a tooltip.
$('div.tooltip').live({mouseenter:function(e){
... animate tooltip open;
},mouseleave:function(e){
... animate tooltip closed;
}});
When you click on the open tooltip it displays a lightbox with more information.
$('div.tooltip').live('click',function(e){
... open related lightbox
});
Everything works as it should, except on mobile devices. When I tap the circle to open the tooltip it fires the click event and completely bypasses the mouseenter/mouseexit events.
Any ideas would be greatly appreciated :) Thanks
Because of the nature of touch screen devices they dont support hover events at all. The best you could do in this regard is use a jquery plugin that supports gestures and use the single-tap and double-tap events, otherwise you would need to place the tooltip somewhere else and make it visible always or have a separate button that solely activates the tip... or you could make it so the first click activates the press and then the next click activates the second function.
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.