Question

我有类似以下内容，但我收到错误：＆＃34; this._toggle不是函数＆＃34;

function handler(){
  this._toggle();
}
SelectFX.prototype._toggle = function(){
   ...
   this.removeEventListener('click', handler);
}
this.addEventListener('click', handler);

我猜测是与addEventListener创建的范围有关，

我当时认为将此添加到变量会修复但是这段代码：

var self = this;
function handler(){
  self._toggle();
}
SelectFX.prototype._toggle = function(){
   ...
   this.removeEventListener('click', handler);
}
this.addEventListener('click', handler);

但上面给出了错误＆＃34;无法读取属性＆＃39; _toggle＆＃39;未定义＆＃34;

如果我使用下面的匿名函数作为点击处理程序，它工作正常但我需要稍后删除点击事件，请帮助

SelectFX.prototype._toggle = function(){
   ...
}
this.addEventListener('click', function(){
   this._toggle();  //Works fine but I need to remove this addEventListener later on
});

我在这里使用Full插件https://gist.github.com/grassed/ce76d9b2a5fa6ab9e5be创建了一个Gist，它以this.selPlaceholder.addEventListener为中心（＆＃39;点击＆＃39;，clickHandler）;

Answer 1

您可以使用本机bind函数在所调用的函数中传递应该表示this的对象。您也可以将其用于事件侦听器。在下面的示例中，我在调用this时将someObject传递给someListener。

＆＃13;

var el = document.getElementById("clickable-span");

var someObject = {
  clickCount: 0,
  someListener: function(){
    this.clickCount++;
    this.showCount();
    el.innerText = 'Click me again';
  },
      
  showCount: function(){
    document.getElementById('target-span').innerText = 'You clicked ' + this.clickCount + ' time(s)';
  }
}

// use bind to pass in what `this` should refer to in the someListener method
// we want `this` to point to someObject so we can use the clickcount and such
el.addEventListener(
  "click", 
  someObject.someListener.bind(someObject)
);

＆＃13;

<button id="clickable-span">Click me</button>
<hr />
<span id="target-span"></span>

＆＃13;

Click Handler中的范围

1 个答案: