Question

我不拥有的代码已经在click事件上放置了一个jQuery委托的事件监听器（用于收集和触发Omniture数据）。

$("html").on('click', 'a', function() { /* Stuff */ });

我编写的代码也需要委托事件，因此我可以在click事件上执行某些程序行为，但我也希望上面的代码也能触发。

$(".module").on('click', 'a.yes', function(event) { /* My stuff */});

当我输入代码时，我可以清楚地看到我的事件被解雇，而不是另一个。

此Stack Overflow回答指出，在现代浏览器中，事件会冒泡。如果事件在上升过程中遇到事件监听器，则该级别的处理程序将触发，但事件继续冒泡。 https://stackoverflow.com/a/4616720/432089

我没有收到任何控制台错误，也许我的页面上没有正确配置其他代码。有人可以确认事件会一直冒泡到顶部，同时激活任何匹配的处理程序吗？（假设事件处理程序没有使用event.stopPropagation停止传播或返回false）

我只是想确保我完全理解事件冒泡，所以我知道从哪里开始调试。（即我的代码与Omniture相关的代码）

Answer 1

如果您的事件处理程序执行这两项操作中的任何一项，则事件不会冒泡：

函数调用event.stopPropagation();
该函数返回false（特定于jQuery）。

以下代码演示了该行为：

$("html").on('click', 'a', function() { alert('base'); });
$(".module").on('click', 'a.yes', function(event) { alert('custom'); });
$(".module").on('click', 'a.yes2', function(event) { alert('custom2'); return false; });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module">
  <a class="yes" href="#">test me</a>
  <a class="yes2" href="#">test me too</a>
</div>

jQuery委托不同DOM层次结构的事件监听器 - 适用的事件监听器是否会触发？

1 个答案: