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

Asked 15/1, 2011 at 3:20 Answered 11/7, 2022 at 10:34

Solved javascript css dom-events onmouseout

228

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.

Menarche answered 15/1, 2011 at 3:20 Comment(4)

I ended up solving the problem using a timeout and clearing it on hover of the child elements – Menarche 16/1, 2011 at 10:5

Hi, I have looked at your demo but when I go over the elements in the bottom right panel nothing happens? – Menarche 16/1, 2011 at 19:48

Found this answer if you are looking to prevent a mouseout on the parent event when you mouseover a child element: javascript mouseover/mouseout. – Sulfatize 10/8, 2012 at 23:31

Check out @Zach Saucier answer buried below – Delicatessen 28/10, 2016 at 19:51

102

function onMouseOut(event) {
        //this is the original element the event handler was assigned to
        var e = event.toElement || event.relatedTarget;
        if (e.parentNode == this || e == this) {
           return;
        }
    alert('MouseOut');
    // handle mouse event here!
}



document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);

I made a quick JsFiddle demo, with all the CSS and HTML needed, check it out...

EDIT FIXED link for cross-browser support http://jsfiddle.net/RH3tA/9/

NOTE that this only checks the immediate parent, if the parent div had nested children then you have to somehow traverse through the elements parents looking for the "Orginal element"

EDIT example for nested children

EDIT Fixed for hopefully cross-browser

function makeMouseOutFn(elem){
    var list = traverseChildren(elem);
    return function onMouseOut(event) {
        var e = event.toElement || event.relatedTarget;
        if (!!~list.indexOf(e)) {
            return;
        }
        alert('MouseOut');
        // handle mouse event here!
    };
}

//using closure to cache all child elements
var parent = document.getElementById("parent");
parent.addEventListener('mouseout',makeMouseOutFn(parent),true);

//quick and dirty DFS children traversal, 
function traverseChildren(elem){
    var children = [];
    var q = [];
    q.push(elem);
    while (q.length > 0) {
      var elem = q.pop();
      children.push(elem);
      pushAll(elem.children);
    }
    function pushAll(elemArray){
      for(var i=0; i < elemArray.length; i++) {
        q.push(elemArray[i]);
      }
    }
    return children;
}

And a new JSFiddle, EDIT updated link

Wellwisher answered 15/1, 2011 at 5:47 Comment(11)

You should add a mouseout event to the fiddle so it can be tested. An alert or something should do. – Menarche 16/1, 2011 at 19:54

Sorry looks like you have alert('MouseOut') , however it does not work for me? I have hit run with no JS library option – Menarche 16/1, 2011 at 19:55

Tested on safari and chrome, but should work on everything! what is your browser? – Wellwisher 16/1, 2011 at 21:19

What if you have grand children? or great grand children? i.e. can you have a recursive solution instead of just immidiate children ? – Marela 27/1, 2012 at 23:48

It works great. But please can you help me detatching it :-)? I've been trying for hours, but it keeps adding eventhandlers to my div. – Eleanoreleanora 18/1, 2013 at 17:4

Here is an edited version for subchilds jsfiddle.net/RH3tA/622 you can add some conditions to add subchild levels (une condition per subchild level) – Deduce 15/4, 2013 at 11:15

Some small change to avoid error when there is more than one cascade level of element. function OnMouseOut(event) { //this is the original element the event handler was assigned to var e = event.toElement || event.relatedTarget; while( e != null ) { if( e == this ) { return; } e = e.parentNode; } alert('MouseOut'); } – Woolly 12/9, 2013 at 23:18

By the way if you were to create the child elements in Javascript by using innerHTML this wont work. They must be created using the createElement method - and before the event is added to the parent. – Zina 25/9, 2013 at 18:35

This doesn't work. mouseleave is the correct answer – Shakeup 9/6, 2014 at 2:3

@itcouldevenbeaboat Both seem to work for me, though mouseleave only seems to work within the eventlistener (so html DOM or simply element.mouseleave = onMouseOut(); won't work).. – Iconium 11/10, 2014 at 16:50

This is quite an old answer - nowadays you can use contains which makes it a much more elegant solution:

function makeMouseOutFn(event) { e = event.toElement || event.relatedTarget; if (this.contains(e)) return; //handle mouse event here }

– Furthermost 30/9, 2020 at 10:44

186

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.

Grimace answered 7/6, 2015 at 18:37 Comment(4)

onMouseLeave is what I ended up using too as it does not bubble up. – Totally 28/6, 2018 at 14:40

Saved me lots of time. thnx – Cochard 2/4, 2019 at 20:51

mouseleave can't be cancelable. – Infallibilism 13/2, 2020 at 8:9

@grecdev, say more! – Smoker 13/4, 2020 at 21:16

137

For a simpler pure CSS solution that works in most cases, one could remove children's pointer-events by setting them to none

.parent * {
     pointer-events: none;
}

Browser support: IE11+

Metasomatism answered 16/9, 2013 at 20:45 Comment(9)

Brilliant! Totally just fixed my issue! – Dreiser 2/4, 2014 at 21:15

This should be the first or at least second answer, I was ready to go with the hassle of event listeners and this totally fixed my issue too. So simple ! – Brewster 12/5, 2014 at 21:5

This prevent mouseout from firing, but for me it also prevents the actual child from being clicked as a selection in the menu, which is the point of the menu. – Gonzalez 17/5, 2015 at 9:6

@hellofunk That's why you'd apply the click event to the parent. The exact code needed varies depending on implementation, this answer just suggests using the pointer-events property – Metasomatism 3/11, 2015 at 20:47

it works only if you do not have other controller elements (edit, delete) inside the area, because this solution blocks them too.. – Hospitality 9/10, 2018 at 15:23

Works like a charm :) – Cummins 2/1, 2019 at 13:25

I have no words for this, it works perfectly and is so clean. Didn't know CSS would allow controlling events – Assize 15/5, 2019 at 7:47

Super simple solution. Hats off to you. – Thorbert 18/12, 2020 at 17:29

Best solution for Angular6+ – Nibelungenlied 13/8, 2023 at 19:48

102

function onMouseOut(event) {
        //this is the original element the event handler was assigned to
        var e = event.toElement || event.relatedTarget;
        if (e.parentNode == this || e == this) {
           return;
        }
    alert('MouseOut');
    // handle mouse event here!
}



document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);

I made a quick JsFiddle demo, with all the CSS and HTML needed, check it out...

EDIT FIXED link for cross-browser support http://jsfiddle.net/RH3tA/9/

NOTE that this only checks the immediate parent, if the parent div had nested children then you have to somehow traverse through the elements parents looking for the "Orginal element"

EDIT example for nested children

EDIT Fixed for hopefully cross-browser

function makeMouseOutFn(elem){
    var list = traverseChildren(elem);
    return function onMouseOut(event) {
        var e = event.toElement || event.relatedTarget;
        if (!!~list.indexOf(e)) {
            return;
        }
        alert('MouseOut');
        // handle mouse event here!
    };
}

//using closure to cache all child elements
var parent = document.getElementById("parent");
parent.addEventListener('mouseout',makeMouseOutFn(parent),true);

//quick and dirty DFS children traversal, 
function traverseChildren(elem){
    var children = [];
    var q = [];
    q.push(elem);
    while (q.length > 0) {
      var elem = q.pop();
      children.push(elem);
      pushAll(elem.children);
    }
    function pushAll(elemArray){
      for(var i=0; i < elemArray.length; i++) {
        q.push(elemArray[i]);
      }
    }
    return children;
}