悬停在元素上时使功能停止

Question

I have a function that runs when hovering a parent div and it should stop working when hovering a child div because there is another function for that.

<div class="parent">
//Here the function should work

<div class="child">Text </div> // here it should stop working

//Here the function should work
</div>

I am conditioning it to work on parent div with

if ($('.parent').is(':hover')) {do stuff}

and I am interested in having something like this:

if ($('.parent').is(':hover') AND NOT $('.child').is(':hover')) { do stuff }.

How can I achieve this?

Thanks!

Answer 1

Use event.stopPropagation() like bellow

$('.parent').hover(function(){
    alert('parent');
})

$('.child').hover(function(e){
    e.stopPropagation();
    alert('child');
})

DEMO

Answer 2

As your mouse goes through the parent first, you can't just use stopPropagation : the parent function would activate when the mouse is on the way to the child.

A solution in such a case is to use a timer : start the action only if the mouse stops over the parent without entering the child.

(function(){
    var timer;
    function p(){
        clearTimeout(timer);
        timer = setTimeout(function(){
            alert('parent');
        }, 500);
    }
    $('.parent').hover(p, function(){
        clearTimeout(timer);
    })

    $('.child').hover(function(e){
        e.stopPropagation();
        clearTimeout(timer);
    }, p)
})();

demonstration

Answer 3

• Use event.stopPropagation() it stops parent elements from knowing about a given event on its child.

• In your code use

  $('.child').hover(function(event){ event.stopPropagation(); })

• stopPropogation on a child preventing any parent event handlers from being executed.