我正在尝试编写一个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(); };
以上就是jQuery教程分享“$(document).on”在event.stopPropagation和“$(a).on”未触发新元素后不触发相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/559079.html