“$（document）.on”在event.stopPropagation和“$（a）.on”未触发新元素后不触发
我正在尝试编写一个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方法function的东西，该方法触发动态创建的元素，但无论event.stopPropagation()方法如何，它都会触发。
有任何想法吗？
有任何想法吗？
事件处理分为两个阶段： 捕获阶段和冒泡阶段 ：
| | / \ -----------------| |--| |----------------- | element1 | | | | | | -------------| |--| |----------- | | |element2 \ / | | | | | -------------------------------- | | W3C event model | ------------------------------------------
默认情况下，事件处理程序必须侦听冒泡阶段（与jQuery绑定的事件处理程序）。
要在调用元素自己的事件处理程序之前对事件做出反应，您必须将处理程序绑定到捕获阶段。 请注意，尤其是较旧的IE浏览器不支持此function。
由于jQuery不允许您这样做，您必须直接使用DOM API ：
document.addEventListener('click', function(event) { // test whether event originates inside 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(); };