你能在内容脚本中杀死监听底层页面事件的事件监听器吗？

Question

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

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

一切都很好......除了每次用户关注（可以理解）新的听众被创建。所以我最终得到了很多重复的事件。

我的扩展程序适用于非常具体的页面，所以我知道他们是否有 Jquery...这个有。

在我的焦点监听器中：

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

我尝试在 focusin 侦听器的开头包含“关闭”命令 - 在添加新事件侦听器之前终止所有现有事件侦听器。以下代码没有任何作用：

$(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 的代码不起作用，因为您没有从添加事件的相同元素中删除，也没有删除相同的事件类型。您将事件直接添加到元素中，但您删除了委托给 document 的事件。

见：https://learn.jquery.com/events/event-delegation/