Question

我有一个Chrome扩展程序，该扩展程序可以在内容脚本中侦听其注入页面中的特定事件。

监听器是在focusin事件上创建的-因为我要监听的元素仅在某些情况下存在。

一切正常……除了每次用户集中精力（可以理解）创建新的侦听器外。所以我最终遇到了很多重复的事件。

“我的扩展程序”可用于非常特定的页面，因此我知道它们是否具有Jquery ...这个页面确实如此。

在focusin侦听器中，我有：

 $('.PageClass_I_listen_for').blur(function(){
  console.log('blurred out of comment area...');
  //Do something
 });

我试过在focusin侦听器的开头包含“ off”命令-在添加新的事件侦听器之前将其杀死。以下代码没有任何作用：

$(document).off('click', '.PageClass_I_listen_for');  //  Kill events

也许您无法杀死（可理解的）事件，这些事件是代码注入页面的一部分？

有什么办法解决这个问题？

帮助表示感谢！

Answer 1

我强烈建议您使用事件委托，而不是将事件侦听器直接附加到元素。

基本上，您在感兴趣的元素上方的层次结构中的某个位置附加了一个事件侦听器。然后，以后再动态添加或删除元素都没有关系。

$(document).on( 'blur', '.PageClass_I_listen_for', function( e ) {
  // use e.currentTarget here
} );

您用于.off的代码不起作用，因为您没有从添加事件的相同元素中删除，也没有删除事件的 type 相同的元素。您将事件直接添加到元素中，但是删除了委派给document的事件。