"$(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方法功能的东西，该方法可以为动态创建的元素触发，但也可以在不考虑event.stopPropagation()方法的情况下触发。
有什么想法吗？
回答 1
Stack Overflow用户
发布于 2015-11-09 04:54:04
有什么想法吗？
事件处理分为两个阶段：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>
https://stackoverflow.com/questions/33598841
复制相似问题