e.stopPropagation()和jQuery.hover()

Question

有没有办法让这两个一起工作或者我必须尝试使用​​mouseenter和mouseleave代替？

Answer 1

您可以使用event.stopPropagation()同.hover(),但你实际上是使用mouseenter和mouseleave用.hover()无妨.如果你提供1个函数.hover(),它会在两个事件上运行,如果你提供2个函数,第一个是mouseenter处理程序,第二个是mouseleave处理程序.

然而,这可能不是你所追求的......因为在进入孩子时mouseenter不会开火,这实际上是它存在的具体原因,在进入孩子时会开火. 您可以看到这里的演示没有区别,从上到下悬停,评论和取消注释,它没有任何区别......因为事件不会冒泡到父级.mouseout .stopPropagation()

但是,如果你正在使用mouseover和mouseout,然后会的问题,就像这样:

$("li").mouseover(function(e) {
    $(this).addClass("red").parents().removeClass("red");
}).mouseout(function(e) {
    $(this).removeClass("red");
});?

现在我们遇到了一个冒泡的问题,因为事件正在冒泡,将类添加到我们刚刚删除它的父级,请在此处查看问题的演示.但是如果我们停止那个泡泡,.stopPropagation()我们会得到所需的效果,如下所示:

$("li").mouseover(function(e) {
    $(this).addClass("red").parents().removeClass("red");
    e.stopPropagation();
}).mouseout(function(e) {
    $(this).removeClass("red");
});?

您可以在此演示中看到它的工作方式有何不同.

简而言之:是 event.stopPropagation()有工作.hover()的,但最有可能的,这不正是你追求的.