Question

我有一个在悬停父div时运行的函数，它应该在悬停子div时停止工作，因为还有另一个函数。

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

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

//Here the function should work
</div>

我正在调整它以使用

在父div上工作

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

我对这样的事情感兴趣：

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

我怎样才能做到这一点？

谢谢！

Answer 1

使用event.stopPropagation()如下文

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

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

DEMO

Answer 2

当您的鼠标首先通过父项时，您不能只使用stopPropagation：当鼠标在前往孩子的路上时，父函数会激活。

在这种情况下的解决方案是使用计时器：仅当鼠标停留在父级而不进入孩子时才启动操作。

(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

使用event.stopPropagation()可以阻止父元素了解其子元素的给定事件。
在您的代码中使用

$('.child').hover(function(event){ event.stopPropagation(); })
stopPropogation 会阻止执行任何父事件处理程序。

将鼠标悬停在元素上时停止功能

3 个答案: