"$(文件）;在事件stopPropagation之后不触发$(a） 在“;而不触发新的元素

"$(document).on" not triggering after event.stopPropagation and "$(a).on" not triggering for new elements

本文关键字：元素 stopPropagation quot 文件 事件 之后      更新时间：2023-09-26

我正在尝试编写一个chrome扩展（用于casperjs测试）。扩展的一部分需要绑定到click事件，我正在这样做：

$(document).on('click', 'a', null, handler)

这适用于所有链接，包括任何新创建的元素。问题是，如果链接有自己的click处理程序来调用event.stopPropagation()方法，则.on不会触发该处理程序。

解决方法是我绑定到a元素，如下所示：

$('a').on('click', null, null, handler)

即使另一个事件处理程序调用event.stopPropagation()方法，这也能很好地触发handler。问题是它不适用于动态创建的元素。因此，创建的任何新元素都不会触发处理程序。

因此，我需要一些具有$(document).on方法功能的东西，它可以为动态创建的元素触发，但也可以不考虑event.stopPropagation()方法而触发。

有什么想法吗？

有什么想法吗？

事件处理分为两个阶段：捕获阶段和冒泡阶段：

                 | |  / '
-----------------| |--| |-----------------
| element1       | |  | |                |
|   -------------| |--| |-----------     |
|   |element2    ' /  | |          |     |
|   --------------------------------     |
|        W3C event model                 |
------------------------------------------

默认情况下，事件处理程序绑定为侦听冒泡阶段（事件处理程序也与jQuery绑定）。

要在调用元素自己的事件处理程序之前对事件作出反应，必须将处理程序绑定到捕获阶段。请注意，尤其是较旧的IE浏览器不支持此功能。

由于jQuery不允许您这样做，您必须直接使用DOM API：

document.addEventListener('click', function(event) {
  // test whether event originates inside <a> first 
  // (search on SO to find out how)
  // then:
  handler.call(event.target, event);
}, true);


document.addEventListener('click', function(event) {
  if (event.target.nodeName !== 'BUTTON') {
    return;
  }
  console.log('Called first.');
}, true);
document.addEventListener('click', function(event) {
  if (event.target.nodeName !== 'BUTTON') {
    return;
  }
  console.log('Called last.');
});
document.querySelector('button').onclick = function(event) {
  console.log('Called in between (could cancel bubbling here)');
  // event.stopPropagation();
};
<button>Click me and look at the console</button>

相关文章：