Question

当我将鼠标悬停在子元素上时，也会调用父事件。我该如何阻止它？

<div class="parent">
    <div class="child">
    </div>
</div>

$(".parent").on("mouseover", function(){//Shouldnt fire on child})
$(".child").on("mouseover", function(){//Child function})

Answer 1

只是抓住孩子的事件并按如下方式停止传播：

 $(".child").on("mouseover", function(e){
     e.stopPropagation();
 //Child function})

PS：这里至少有一千个问题与此相似。请做你的研究。

Answer 2

您可以在子级中使用stopPropagation来阻止父级处理程序收到有关该事件的通知：

event.stopPropagation();

http://api.jquery.com/event.stoppropagation/

Answer 3

如果您不希望孩子体验父母鼠标悬停事件处理程序的涓滴效应，则在孩子鼠标悬停事件的处理程序中，需要使用jQuery的 event.stopPropagation（）。以下示例说明了其用法：

$(".parent").on("mouseover", function(){
    alert('parents r family');
});
$(".child").on("mouseover", function( e ){
    e.stopPropagation();
    alert('kids r children');
});

如果您使用e.stopPropagation()之类的代码作为孩子的鼠标悬停事件处理程序，但忽略了使用参数e提供该函数，则代码将无法按照人们的意愿执行。这发生在jQuery版本1.6.4到2.1.0和jQuery edge。

jQuery文档指定必须提供一个参数来保存事件对象，如下所示（强调我的）：

$（“p”）。click（功能（事件）{ 的事件 .stopPropagation（）; // 做一点事 }）;

good和weird
的现场演示
在“怪异”演示中，子句的处理函数没有任何参数。因此，其代码中的第一个语句使用了一个伪造的事件对象，并且毫不奇怪，当子进程的事件处理程序无法执行其剩余的代码时，父进程的处理程序的传播完全没有被抑制。如果没有为子函数提供持有事件对象的参数，则函数代码中的事件对象不存在，这是控制台日志确认的事实：

未捕获的ReferenceError：未定义e。

当然，未定义的对象e与其方法一样完全没用。此错误足以阻止子进程的其余部分执行。

在JQuery中停止鼠标悬停的传播

3 个答案: