Javascript 我无法删除事件监听器

Question

下面是我的代码的缩短版本。问题是我无法删除函数内的事件侦听器，这会触发一个简单的警报。有什么帮助吗？

const resizers = document.querySelectorAll(".resizer");

for (let resizer of resizers) {
  resizer.addEventListener("mousedown", mousedownForResizer);

  function mousedownForResizer(e) {
    console.log('deneme');
  }
}

function deneme() {
  let resizers = document.querySelectorAll(".resizer");
  for (let resizer of resizers) {
    resizer.removeEventListener("mousedown", mousedownForResizer, true);
  }
}

deneme();

.resizer {
  background: grey;
  width: 50px;
  height: 50px;
  border: 1px solid red;
}

<div class="resizer ne"></div>
<div class="resizer nw"></div>
<div class="resizer sw"></div>
<div class="resizer se"></div>

Answer 1

您的代码中有两个问题导致其无法工作。

首先，

mouseDownForResize()

在您的

for

循环范围内重新定义，因此

deneme()

无法访问实例。在逻辑的两个部分的范围内使用单个实例。

其次，您在删除事件时将

useCapture

参数设置为

true

，在本例中这是不正确的。

解决了这两个问题后，您的代码就可以工作了。您可以在下面的示例中看到它，但请注意，这会绑定然后立即取消绑定事件处理程序，因此当您单击这些框时似乎不会发生任何事情。

function mousedownForResizer(e) {
  alert('deneme');
}

const resizers = document.querySelectorAll(".resizer");
for (let resizer of resizers) {
  resizer.addEventListener("mousedown", mousedownForResizer);
}
console.log('event handlers assigned.');

function deneme() {
  let resizers = document.querySelectorAll(".resizer");
  for (let resizer of resizers) {
    resizer.removeEventListener("mousedown", mousedownForResizer);
  }
  console.log('event handlers removed.');
}
deneme();

div.resizer {
  background: grey;
  width: 50px;
  height: 50px;
  border: 1px solid red;
}

<div class="resizer ne"></div>
<div class="resizer nw"></div>
<div class="resizer sw"></div>
<div class="resizer se"></div>