我正在尝试删除监听器定义中的事件监听器：
canvas.addEventListener('click', function(event) {
click++;
if(click == 50) {
// remove this event listener here!
}
// More code here ...
我怎么能那样做？这 = 事件...
你需要使用命名函数。
此外，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);
}
应该做的。
你可以使用一个命名的函数表达式（在这种情况下函数被命名为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;
};
};
看起来没有人涵盖当前 JavaScript DOM 规范的一部分，该规范为您提供了一种机制来删除您的事件侦听器without 使用 removeEventListener。如果我们查看https://dom.spec.whatwg.org/#concept-event-listener，我们会看到有许多属性可以传递给控制事件监听：
{
type (a string)
callback (null or an EventListener object)
capture (a boolean, initially false)
passive (a boolean, initially false)
once (a boolean, initially false)
signal (null or an AbortSignal object)
removed (a boolean for bookkeeping purposes, initially false)
}
现在，该列表中有很多有用的属性，但为了删除事件侦听器，我们要使用 signal 属性（已在 2020 年底添加到 DOM 级别 3），因为它让我们通过调用 abort() 告诉 JS 引擎移除一个事件监听器，而不必费心使用 removeEventListener:
const canvasListener = (new AbortController()).signal;
canvas.addEventListener('click', () => {
click++;
if (click === 50) {
canvasListener.abort();
} else {
doSomethingWith(click);
}
}, {
signal: canvasListener
});
（注意这里没有使用 useCapture 标志，因为 useCapture 标志本质上是完全没用的）
完成：JS 引擎将中止并清理我们的事件侦听器。不保留对处理函数的引用，不确保我们调用 removeEventListener 的属性与调用 addEventListener 的属性完全相同：我们只是取消了监听器。
我想你可能需要提前定义处理函数，像这样：
var myHandler = function(event) {
click++;
if(click == 50) {
this.removeEventListener('click', myHandler);
}
}
canvas.addEventListener('click', myHandler);
这将允许您按名称从其内部删除处理程序。
如果有人使用 jquery，他可以这样做：
var click_count = 0;
$( "canvas" ).bind( "click", function( event ) {
//do whatever you want
click_count++;
if ( click_count == 50 ) {
//remove the event
$( this ).unbind( event );
}
});
希望它可以帮助某人。 请注意，@user113716 给出的答案很好:)
实现这一目标的一种方法是使用 jquery，因此您可以使用：
canvas.click(yourfunction);
然后你可以分离所有的事件监听器：
canvas.off();
试试这个，它对我有用。
<button id="btn">Click</button>
<script>
console.log(btn)
let f;
btn.addEventListener('click', f=function(event) {
console.log('Click')
console.log(f)
this.removeEventListener('click',f)
console.log('Event removed')
})
</script>