jQuery技术:“$(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(); }; 
      

      以上就是jQuery教程分享“$(document).on”在event.stopPropagation和“$(a).on”未触发新元素后不触发相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

      ctvol管理联系方式QQ:251552304

      本文章地址:https://www.ctvol.com/jquerytutorial/559079.html

      (0)
      上一篇 2021年2月1日
      下一篇 2021年2月1日

      精彩推荐