Prevent Particular Child Element from Firing Parent'S Mouseover Event in Jquery

$(function() {  $('.cover').on('mouseover', function(e) {      if (e.target === this) {        $('.cover').css('background', 'red');      }    })    .on('mouseout', function() {      $('.cover').css('background', 'transparent');    });});

* {  padding: 0;  margin: 0;}.cover {  padding: 2rem;  text-align: center;  position: relative;  height: 10rem;}.cover .details-wrapper {  background-color: #eee;  position: absolute;  top: 50%;  left: 50%;  padding: 2rem;  transform: translate(-50%,-50%);  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="cover">  Cover  <div class="details-wrapper">    Details wrapper  </div></div>

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

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

child click event firing parent mouseover event

The mouseover event is fired before you click. So, apart with a delay, you can't prevent its handling.

Here's one way to deal with that :

var timer;
document.getElementById("treeNodeText").addEventListener('mouseover', function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
       // handle mouseover
    }, 400); // tune that delay (depending on the sizes of elements, for example)
});
document.getElementById("firstItem").addEventListener('click', function(){
    clearTimeout(timer); // prevents the mouseover event from being handled
    // handle click
};

ignore Mouseout event from child element of Mouseover element

You can use the event .stopPropagation() method in the event handler function.

$("document").ready(function() {
    $('.tooltip').mouseenter(function(event){
        var id = $(this).siblings('.tooltip-c').attr('id');
        $('.tp'+id).fadeIn(500);
        event.stopPropagation(); 
     });
});

How to disable mouseout events triggered by child elements?

The question is a bit old, but I ran into this the other day.

The simplest way to do this with recent versions of jQuery is to use the mouseenter and mouseleave events rather than mouseover and mouseout.

You can test the behavior quickly with:

$(".myClass").on( {
   'mouseenter':function() { console.log("enter"); },
   'mouseleave':function() { console.log("leave"); }
});

Parent's mouseout is triggered when mouse enters parent from child

You got this problem because of event bubbling. See your fiddle changed a little with colored borders.

When you move mouse out of content then mouseout event is fired (for leaving content). content doesn't take care of it so it bubbles to his parent which is inner and so on. mouseout event is cought only by outer handler.

See also jquery .mouseout(): This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the Inner element in this example, a mouseout event will be sent to that, then trickle up to Outer. This can trigger the bound mouseout handler at inopportune times. See the discussion for .mouseleave() for a useful alternative.

---

Related Topics