I have a component which is essentially a div containing a list of div elements (other mini components). The inner divs can change (add, delete) based on user interaction, therefore allowing the user to scroll if we have an overflow.
When showing this div and then scrolling with the mouse for the first time, the onScroll is called without problems. When I hide the div via css: transform: translate3d, then reopen the div the onScroll no longer works.
I added onWheel with an empty method to the div in the render function.
The scroll works!
Can someone please explain why when I added a listener to the wheel event it will cause the scroll event to fire? Also why is the scroll event is not getting fired in the first place?
I've tried to reproduce it in a fiddle, but it seems to work:
jsfiddle
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.
Ok so my basic problem is as follows. I have an image that causes everything else on the page disable using a blank div with a z-index. This is during a mouseover event of the image. Next the code goes into setting the z-index on the div that I want to be able to click or mouseover. Also I wrapping these images in a div that is used for a mouseout event to hide the images I do not want to show.
However when mousing over the images or text inside the div it causes the mouseout event to trigger. I have looked into event bubbling but it does not seem to be what is happening. Is there a way to turn off the mouseout event to object inside of the div with the mouseover event?
Long story short I need to make a mouseout event not trigger on nested items.
Thanks in advance.
Instead of using mouseout you may go this way:
when blocking the UI by overlaying the page with the blank div observe the mouseover-event of the wrapper-div
When mouseover fires on the wrapper-div start observing the mouseover-event of the blank div
When the mouseover fires on the blank div reset the page(remove the blank div)
The approach should be clear, if the mouse is over the blank div it must be outside the wrapper-div.
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 a couple of divs overlaid on each other with differing z-index values.
The default behaviour for browsers seems to be the event bound to the top-most z-index div gets fired. I.e. I have multiple onclicks one for each div but only the top one is fired when the area is clicked.
Is there a way to fire the events attached to all divs no matter what the z-index of each is, so long as the action is 'over' that div without regard to z-index?
The event doesn't actually occur on the element that is obscured by another unless the other element is contained in the first, then it will bubble up. The only way that I can think of to achieve what you want is to go through all of the potential elements and see if any of them contain the point at which the click occurred and trigger a click on that element (if it's not the current one).
If you are using an javaScript framework event bubbling might be included. (ExtJS I know for sure has this kind of event feature.)