我有以下代码来添加 eventListener
area.addEventListener('click',function(event) {
app.addSpot(event.clientX,event.clientY);
app.addFlag = 1;
},true);
它按预期正常工作......后来在另一个函数中我尝试使用以下代码删除事件侦听器
area.removeEventListener('click',function(event) {
app.addSpot(event.clientX,event.clientY);
app.addFlag = 1;
},true);
但是偶数监听器没有被删除..为什么会发生？我的removeEventListener()有什么问题吗？注意：这里的区域类似于 document.getElementById('myId')
这是因为这两个匿名函数是完全不同的函数。您removeEventListener的参数不是对先前附加的函数对象的引用。
function foo(event) {
app.addSpot(event.clientX,event.clientY);
app.addFlag = 1;
}
area.addEventListener('click',foo,true);
area.removeEventListener('click',foo,true);
我发现对于 windows 对象，最后一个参数“true”是必需的。如果没有捕获标志，则删除不起作用。
您在两次调用中都创建了两个不同的函数。所以第二个函数与第一个函数没有任何关系，引擎可以删除该函数。改用函数的通用标识符。
var handler = function(event) {
app.addSpot(event.clientX,event.clientY);
app.addFlag = 1;
};
area.addEventListener('click', handler,true);
稍后您可以通过调用删除处理程序
area.removeEventListener('click', handler,true);
在 React 函数组件中，确保使用useCallback(() => {}钩子定义回调。如果你不这样做，每次重新渲染时回调将是不同的，并且该removeEventListener方法将不起作用。
const scrollCallback = useCallback(() => { // do sth. }
window.addEventListener("scroll", scrollCallback, true);
window.removeEventListener("scroll", scrollCallback, true);
要删除它，请将函数存储在变量中，或者简单地使用命名函数并将该函数传递给removeEventListener调用：
function areaClicked(event) {
app.addSpot(event.clientX, event.clientY);
app.addFlag = 1;
}
area.addEventListener('click', areaClicked, true);
// ...
area.removeEventListener('click', areaClicked, true);