Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery

javascript css dom-events onmouseout
John picture John · Jan 15, 2011 · Viewed 140k times · Source

I am having trouble with the onmouseout function in an absolute positoned div. When the mouse hits a child element in the div, the mouseout event fires, but I do not want it to fire until the mouse is out of the parent, absolute div.

How can I prevent the mouseout event from firing when it hits a child element WITHOUT jquery.

I know this has something to do with event bubbling, but I am having no luck on finding out how to work this out.

I found a similar post here: How to disable mouseout events triggered by child elements?

However that solution uses jQuery.

Answer

PHPWannaBePro picture PHPWannaBePro · Jun 7, 2015

Use onmouseleave.

Or, in jQuery, use mouseleave()

It is the exact thing you are looking for. Example:

<div class="outer" onmouseleave="yourFunction()">
    <div class="inner">
    </div>
</div>

or, in jQuery: 

$(".outer").mouseleave(function(){
    //your code here
});

an example is here.

Related questions

How do you Hover in ReactJS? - onMouseLeave not registered during fast hover over

How can you achieve either a hover event or active event in ReactJS when you do inline styling? I've found that the onMouseEnter, onMouseLeave approach is buggy, so hoping there is another way to do it. Specifically, if you mouse …

Read More
How to make HTML element resizable using pure Javascript?

I was wondering how we can make a HTML element like <div> or <p> tag element resizable when clicked using pure JavaScript, not the jQuery library or any other library.

Read More
Is it possible to add an eventlistener on a DIV?

I know this function: document.addEventListener('touchstart', function(event) { alert(event.touches.length); }, false); But is it possible to add this to a div? Example: document.getElementById("div").addEventListener('touchstart', function(event) { alert(event.touches.length); }, false); I haven't tested …

Read More