“$(document).on”在 event.stopPropagation 之后不触发，“$(a).on”不触发新元素

Question

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

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

这对所有 link 都非常有效，包括任何新创建的元素。问题是如果 link 有它自己的 click 调用 event.stopPropagation() 方法的处理程序，那么 .on 不会触发处理程序。

解决方法是我像这样绑定到 a 元素：

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

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

所以我需要一些具有 $(document).on 方法功能的东西，它会触发动态创建的元素，但无论 event.stopPropagation() 方法如何，它都会触发。

有什么想法吗？

Answer 1

Any ideas?

事件处理分为两个阶段：capturing phase and bubbling phase:

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

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

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

由于jQuery不允许你这样做，你必须使用the DOM API directly:

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>

“$(document).on”在 event.stopPropagation 之后不触发，“$(a).on”不触发新元素

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

javascript

jquery

dom

jquery-plugins

jquery-events