Question

目前正在使用OLOO风格方法开展小型项目。 Problem found here

所以我面临的问题是我有一个事件处理程序。

eventHandler: function() { console.log('Hit'); testSelector.removeEventListener('click', this.eventHandler, false); }

现在发生的事情是我希望在第一次点击后将其删除。然而，这似乎不像我预期的那样有效。我绑定了这个引用的对象，但似乎有一些我在这里实际发生的事情中缺少的东西。是否有人能够澄清实际发生的事情或我出错的地方？

Answer 1

我不是OLOO的专家，但我可以在你的例子中看到两个问题：

eventListener回调处理程序中的this引用该节点，因此您需要注意在两种方法（this）中引用相同的add/removeEventListener

removeEventListener

addEventListener无法正常工作，当您使用bind时，您实际上是创建一个新功能（所以你必须跟踪它）

代码：

var testSelector = document.querySelector('.test');

var object = {
  init: function() {
    this.ref = this.eventHandler.bind(this)
    testSelector.addEventListener('click', this.ref, false);
  },
  eventHandler: function() {
    console.log('Hit');
    testSelector.removeEventListener('click', this.ref, false);
  }
}

object.init();

https://jsbin.com/hejenuraba/1/edit?js,console,output

Answer 2

我按照以下方式在我的环境中工作：

var testSelector;
var eventHandler = function(){
    console.log('Hit');
    testSelector.removeEventListener('click', eventHandler, false);
    }

$(document).ready(function(){
    testSelector = this.getElementById('btn');
    testSelector.addEventListener('click',eventHandler);
});

您的代码看起来不错，但您可能需要交叉检查以下内容：

在您的代码行中：

testSelector.removeEventListener('click', this.eventHandler, false);

确保您拥有对testSelector和eventHandler

的引用

删除对象文字中的事件侦听器丢失此引用

2 个答案: