Pass mouse event to elements below HTML

user_13672396 0
Viewed 121

Here is the Jsfiddle code demonstrating my problem

Two div tags child1 and child2 are absolutely placed, so that child2 will be on top of child1 element. I need to capture OnMouseOut event on child1.

I registered OnMouseOut event on child1, but when I hover over child2 OnMouseOut event is triggered even though I am still inside child1. If I put pointer-events as none on child2 , it works as expected. But I dont want to do this as I want to capture pointer events on child2 as well.

How can I achieve this?

reactjs css html javascript
1 Answers

If you make child2 a child of child1 you can use the mouseleave event rather than the mouseout event.

mouseleave is fired when the pointer has exited the element and all of its descendants, whereas mouseout is fired when the pointer leaves the element or leaves one of the element's descendants (even if the pointer is still within the element) - mdn

Seems to work here

<div id="child1">
    child1
    <div id="child2">child2</div>
</div>
//script : document.getElementById("child1").addEventListener('mouseleave',onMouseOut);
user_108845570
Related