Question

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

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

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

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

这很好，即使另一个事件处理程序调用{{1}}方法，也会触发$('a').on('click', null, null, handler)。问题是它对动态创建的元素不起作用。因此，创建的任何新元素都不会触发处理程序。

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

有什么想法吗？

Answer 1

有什么想法吗？

事件处理分为两个阶段：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”之后没有触发新元素

1 个答案: