我正在尝试删除侦听器定义中的事件侦听器：
canvas.addEventListener('click', function(event) {
click++;
if(click == 50) {
// remove this event listener here!
}
// More code here ...
我怎么能那样做？这 = 事件...
JavaScript：删除事件侦听器
IT技术
javascript
events
event-handling
listener
2021-02-04 16:53:46
6个回答
您需要使用命名函数。
此外，click变量需要在处理程序之外才能递增。
var click_count = 0;
function myClick(event) {
click_count++;
if(click_count == 50) {
// to remove
canvas.removeEventListener('click', myClick);
}
}
// to add
canvas.addEventListener('click', myClick);
编辑：您可以click_counter像这样关闭变量：
var myClick = (function( click_count ) {
var handler = function(event) {
click_count++;
if(click_count == 50) {
// to remove
canvas.removeEventListener('click', handler);
}
};
return handler;
})( 0 );
// to add
canvas.addEventListener('click', myClick);
通过这种方式，您可以跨多个元素增加计数器。
如果您不希望那样，并希望每个人都有自己的计数器，请执行以下操作：
var myClick = function( click_count ) {
var handler = function(event) {
click_count++;
if(click_count == 50) {
// to remove
canvas.removeEventListener('click', handler);
}
};
return handler;
};
// to add
canvas.addEventListener('click', myClick( 0 ));
编辑： 我忘记命名在最后两个版本中返回的处理程序。固定的。
canvas.addEventListener('click', function(event) {
click++;
if(click == 50) {
this.removeEventListener('click',arguments.callee,false);
}
应该做。
您可以使用命名函数表达式（在这种情况下，函数名为 named abc），如下所示：
let click = 0;
canvas.addEventListener('click', function abc(event) {
click++;
if (click >= 50) {
// remove event listener function `abc`
canvas.removeEventListener('click', abc);
}
// More code here ...
}
快速而肮脏的工作示例：http : //jsfiddle.net/8qvdmLz5/2/。
有关命名函数表达式的更多信息：http : //kangax.github.io/nfe/。
如果@Cybernate 的解决方案不起作用，请尝试将触发器分解为它自己的功能，以便您可以引用它。
clickHandler = function(event){
if (click++ == 49)
canvas.removeEventListener('click',clickHandler);
}
canvas.addEventListener('click',clickHandler);
element.querySelector('.addDoor').onEvent('click', function (e) { });
element.querySelector('.addDoor').removeListeners();
HTMLElement.prototype.onEvent = function (eventType, callBack, useCapture) {
this.addEventListener(eventType, callBack, useCapture);
if (!this.myListeners) {
this.myListeners = [];
};
this.myListeners.push({ eType: eventType, callBack: callBack });
return this;
};
HTMLElement.prototype.removeListeners = function () {
if (this.myListeners) {
for (var i = 0; i < this.myListeners.length; i++) {
this.removeEventListener(this.myListeners[i].eType, this.myListeners[i].callBack);
};
delete this.myListeners;
};
};
其它你可能感兴趣的问题