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.
Related
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
This problem is a little complicated and wordy.
I have a parent window, which pops out a child window. They have some overlapping area.
In parent window, there is a div which handles mouseover and mouseout event.
When the child window pops out, it covers part of the parent div.
In the following, mouse moves to div (mouseover works), click pops out child window.
Now move mouse to child window. At this moment, I expect mouseout to div, but not.
I guess the system still thinks the mouse is within div even covered by the child window.
Is there any way to get through this? But the relative position of those elements should not change. Thank you for your advice.
If all else fails move your code from the mouseout event of the div to the mouseover event of the pop-up. First, though, I'd make sure that the mouseout event ever fires, e.g. when you move outside the div's bounds.
Using IE8, i have a mouseover event on a div that contains several images.
When moving over the div the event triggers fine, but the problem is that when the user enters and exists an image, the div mouseover triggers again.
Apperenlty IE8 sees hovering images as leaving the div.
Does anyone know a nice method so the event triggers only once when entering the div and doesn't fire anymore while the user is wihtin the div's borders?
Use mouseenter and mouseleave instead of mouseover and mouseout
I am trying to create an animation in javascript that is triggered by a mouseover event and then returns to the initial state on mouse out. When the user runs their cursor over an image on the page, another div with an initial height of 0px gradually rises in height to 50px over the bottom portion of the image.
The problem I am facing is that when they move the cursor from the image to the div which now covers the bottom portion of the image, it triggers the mouseout (as it is a separate element from the image) and then a new mouseover event in quick succession because the div disappears when it detects that the cursor is no longer over the image (meaning the div appears and disappears quickly, over and over again).
I am wondering how I would go about breaking such a loop so that the div does not disappear when the cursor runs over it from the image (i.e. prevent the onmouseout event from triggering unless the mouse moves to some other element that is not the newly created div).
Here's an image to hopefully better illustrate the problem:
http://i.imgur.com/qcE64.jpg
I think for this situation you'd want to use a wrapper div around both the image and the div you're animating. Attach the mouseover/mouseout events to the wrapper and they will trigger when you're expecting them to. Here's a jsfiddle example
I have an HTML element with overflow: scroll. The click event listener registered with the element is triggered when I click on the element, but not when I click on the scroll bar for the element. Is it possible to capture mouse events which occur on an HTML element's scroll bar?
The reason I want to do this is to make a visual popup element disappear when ever a click event occurs anywhere outside the popup element.
you can style away the standard scroll bar and place your own, which would allow you the control you seek. http://livepipe.net/control/scrollbar might help.