Question

<!DOCTYPE html>
<html>

<head>

<script src="jquery-2.1.1.min.js" type="text/javascript"></script>

</head>

<body>

<div id="outer">
    <div id="inner">
    </div>
</div>

<script type="text/javascript">

$("#outer").on("myevent", function(event) { 
    alert(event.target.id);
    event.stopPropagation();
    return false;
});

$("div").trigger("myevent");

</script>

</body>

</html>

在上面的代码中，我希望事件myevent由outer div处理一次。但我看到两个提醒：outer然后是inner。为什么stopPropagation在这里不起作用，如何阻止将自定义事件传播给孩子？

编辑：我想全局触发事件，比如$("div").trigger("myevent");，但我只想在我订阅的地方处理它。

Answer 1

而不是在event.stopPropagation()上使用$('#outer').on('myevent')，而是需要在单独的处理程序中的每个div元素上使用它：

$("#outer").on("myevent", function(event) { 
    console.log(event.target.id);
    return false;
});
$('div').on('myevent', function(event) { // or $('*').on('myevent', ...
    event.stopPropagation();
});

$("div").trigger("myevent"); // only logs 'outer'

http://jsfiddle.net/mblase75/z7NQy/

Answer 2

$("div").trigger("myevent");相当于：

$("div").each(function() {
    $(this).trigger("myevent");
});

因为jQuery会自动遍历与选择器匹配的所有元素。所以它分别在内部和外部DIV上触发事件。

当它在内部DIV上触发它时，那里没有处理程序，所以没有什么能阻止事件冒泡到外部DIV。

要阻止这种情况发生，您应该更具体地了解您触发的元素：

$("#outer").trigger("myevent");

Answer 3

您正在收到两条提醒，因为您在myevent上触发了div，因此它将适用于html中提供的所有div。在这种情况下，您有内部和外部div逐个触发myevent。

要在外部div使用时触发myevent：

$("div#outer").trigger("myevent");

<强> Demo

jQuery事件stopPropagation不适用于自定义事件

3 个答案: