onmouseover / onmouseout and nested divs
I had never noticed a behavior which left me astonished
If you have two nested divs and are listening for the onmousover event on the parent div, you will get a onmouseout event when entering the nested div!
As I see it, since the mouse has not left the area covered by the red div, I would not expected a mouseout event. How do I now know when the mouse leaves the red box and when it only mouse on a nested element?
Move the mouse into the blue box passing through the red one to see the fired events:
If you wan to know when you exit the parent container (and not when you are on the red box), you can listen for mouse over events on the body and detect if the element triggering the event is an contained in the parent. Just think the other way around!
If you have two nested divs and are listening for the onmousover event on the parent div, you will get a onmouseout event when entering the nested div!
parent div
Nested div
As I see it, since the mouse has not left the area covered by the red div, I would not expected a mouseout event. How do I now know when the mouse leaves the red box and when it only mouse on a nested element?
Move the mouse into the blue box passing through the red one to see the fired events:
If you wan to know when you exit the parent container (and not when you are on the red box), you can listen for mouse over events on the body and detect if the element triggering the event is an contained in the parent. Just think the other way around!
Comments
Post a Comment