" $（文件）。在"在event.stopPropagation之后不触发，并且“$（a）.on”不触发新元素

问题描述

我正在尝试写一个chrome扩展名（用于casperjs测试）。扩展程序的一部分需要绑定到我正在做的点击事件：

  $（document）.on（'click'，'a'，null，handler）
  

这对所有的链接都很好，包括任何新创建的元素。问题是如果一个链接有它自己的点击处理程序，调用 event.stopPropagation（）方法，那么 .on 不触发处理程序。

解决方法是绑定到 a 这样的元素：

  $（'a'）。on '，null，null，handler）
  

这样可以正常工作并触发处理程序即使另一个事件处理程序调用了 event.stopPropagation（）方法。问题是它不适用于动态创建的元素。所以，创建的任何新元素都不会触发处理程序。

所以我需要一些具有 $（document）.on 方法，触发动态创建的元素，但触发器也不管 event.stopPropagation（）方法触发。

任何想法？

解决方案

事件处理分为两个阶段：：

默认情况下，事件处理程序必须监听冒泡阶段（事件处理程序与jQuery也是）。

要在元素自己的事件处理程序被调用之前对事件做出反应，必须将处理程序绑定到捕获阶段。请注意，特别是较老的IE浏览器不支持此功能。

由于jQuery不允许您执行此操作，因此您必须使用：

  document.addEventListener（'click'，function（event）{
 //测试事件是否发生在< a>首先
 //（在SO上搜索以找到如何）
 // then：
 handler.call（event.target，event）; 
}，true）; 
  

  document.addEventListener（'click'，function事件）{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。日志（'在之间调用（可以在这里取消冒泡）'）; // event.stopPropagation（）;};  

 按钮>点击我并查看控制台< / button>  

I'm trying to write a chrome extension (for casperjs testing). A part of the extension needs to bind to the click event which I'm doing like this:

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

This works great for all links, including any newly created elements. Problem is if a link has it's own click handler that calls the event.stopPropagation() method then the .on does not trigger the handler.

The workaround is I bind to the a elements like this:

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

This works fine and triggers the handler even if another event handler calls the event.stopPropagation() method. Problem is it does not work for dynamically created elements. So, any new elements created do not trigger the handler.

So I need something that has the functionality of the $(document).on method that triggers for dynamically created elements, but which also triggers regardless the event.stopPropagation() method.

Any ideas?

解决方案

Event handling is separated in two phases: capturing phase and bubbling phase:

By default event handlers are bound to listen to the bubbling phase (event handlers bound with jQuery as well).

To react to the event before the element's own event handler is called, you have to bind the handler to the capturing phase. Note that especially older IE browsers don't support this.

Since jQuery doesn't let you do this, you have to use 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>

这篇关于" $（文件）。在"在event.stopPropagation之后不触发，并且“$（a）.on”不触发新元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！