如何为多个函数调用删除函数内的所有事件侦听器？

Question

这是我目前正在处理的代码的一部分。在我的 newDrag 函数中，每当我的鼠标移动时，我都会设置一个初始值 addEventListener()。

function newDrag(id) {
   document.addEventListener("mousemove", consoleLog, true);
      function consoleLog() {
        console.log(id);
      }
    
   document.onmousedown = function () {
        console.log("downed")
        window.document.removeEventListener("mousemove", consoleLog, true);
    };
}
    
newDrag("div2");
newDrag("div0");

调用函数时，给出的输出为 div2 和 div0。但是，当我单击鼠标并再次开始移动光标时，我一直得到 div2.

的输出

请记住：对于禁用功能，mousedown 必须出现在文档中。调用元素时代码确实有效，但我需要它在文档中。

谢谢！

Answer 1

您不需要为每个元素设置不同的鼠标事件侦听器。在 document 上设置一个，然后检查 $event.target 以查看您将鼠标悬停在哪个元素上。

这样你就可以按照你想要的方式删除侦听器。

要获取元素 ID，请使用 $event.target.id

  document.addEventListener("mousemove", consoleLog);

  function consoleLog(e) {
    if (['div0', 'div2'].includes(e.target.id)) console.log(e.target.id);
  }

  document.onmousedown = function(e) {
    console.log("downed", e.target.id)
   document.removeEventListener("mousemove", consoleLog);
  };

div {
  padding: 20px;
  background-color: #333;
  margin: 10px;
}

#div2 {
  background-color: #f00;
}

<div id="div0"></div>
<div id="div2"></div>

Answer 2

您应该将事件处理程序附加到元素（#div0 或 #div2）而不是文档。然后使用事件对象的target属性

function newDrag(id) {
  document.querySelector(`#${id}`).addEventListener("mousemove", consoleLog, true);
  function consoleLog(e) {
    console.log(e.target.id);
  }

  document.querySelector(`#${id}`).onmousedown = function (e) {
    console.log("downed")
    e.target.removeEventListener("mousemove", consoleLog, true);
  };
}

newDrag("div2");
newDrag("div0");

div[id^=div]{
  height: 40px;
  background-color: rgba(0,0,255,0.4);
  margin: 20px;
}

/* for the snippet console */
.as-console-wrapper{
  max-height: 1.2em !important;
}

<div id="div0">div0</div>
<div id="div2">div2</div>

如何为多个函数调用删除函数内的所有事件侦听器？

How does one remove all event listeners within a function for multiple function calls?

javascript

dom-events