从另一个事件目标中删除事件侦听器答案

【问题标题】：Remove event listener from another event target从另一个事件目标中删除事件侦听器
【发布时间】：2021-01-12 02:21:28
【问题描述】：

我尝试从另一个事件目标中移除一个事件监听器：

-I can remove the event to the red element from this "red event" //我可以从这个"green event"中移除事件到绿色元素。

-但是我无法从“红色事件”中移除事件到绿色元素 // 我无法从“绿色事件”中移除事件到红色元素，我不明白为什么。

如何在第一次单击其中一个元素后删除所有事件侦听器？

var clickred = 0;
var clickgreen = 0;
var elemRed = document.getElementById("js-click-me-red");
var elemGreen = document.getElementById("js-click-me-green");

elemRed.addEventListener("click", function h() {
  clickred++;
  if (clickred >= 3) {
    elemGreen.removeEventListener("click", h);
    elemRed.removeEventListener("click", h);
  }

  // debug only
  document.getElementById("js-debug-red").innerHTML += "click<br>";
});

elemGreen.addEventListener("click", function h() {
  clickgreen++;
  if (clickgreen >= 3) {
    elemRed.removeEventListener("click", h);
    elemGreen.removeEventListener("click", h);
  }

  // debug only
  document.getElementById("js-debug-green").innerHTML += "click<br>";
});

body {
  display: flex;
  flex-direction: row;
}

#js-debug-red {
  color: red;
}

#js-debug-green {
  color: green;
}

<body>
  <article>
    <div id='js-click-me-red' style='width: 50px; height: 50px; background-color: red'></div>
    <div id='js-debug-red'></div>
  </article>
  <article>
    <div id='js-click-me-green' style='width: 50px; height: 50px; background-color: green'></div>
    <div id='js-debug-green'></div>
  </article>
</body>

【问题讨论】：

您正在addEventListener 中创建一个匿名函数。以这种方式删除甚至监听器需要您传递函数的引用。快速分叉示例here。更多信息MDN
名称h 是该函数表达式的本地名称。因此，在elemRed 中，您将删除红色的h 监听器，在elemGreen 中，您将删除绿色的h 监听器。

标签： javascript removeeventlistener

【解决方案1】：

在addEventListener 之外定义函数，以便为它们提供全局名称，并为两个侦听器指定不同的名称。

var clickred = 0;
var clickgreen = 0;
var elemRed = document.getElementById("js-click-me-red");
var elemGreen = document.getElementById("js-click-me-green");

elemRed.addEventListener("click", redListener);

elemGreen.addEventListener("click", greenListener);

function redListener() {
  clickred++;
  if (clickred >= 3) {
    removeAllListeners();
  }

  // debug only
  document.getElementById("js-debug-red").innerHTML += "click<br>";
}

function greenListener() {
  clickgreen++;
  if (clickgreen >= 3) {
    removeAllListeners();
  }

  // debug only
  document.getElementById("js-debug-green").innerHTML += "click<br>";
}

function removeAllListeners() {
  elemGreen.removeEventListener("click", greenListener);
  elemRed.removeEventListener("click", redListener);
}

body {
  display: flex;
  flex-direction: row;
}

#js-debug-red {
  color: red;
}

#js-debug-green {
  color: green;
}

<body>
  <article>
    <div id='js-click-me-red' style='width: 50px; height: 50px; background-color: red'></div>
    <div id='js-debug-red'></div>
  </article>
  <article>
    <div id='js-click-me-green' style='width: 50px; height: 50px; background-color: green'></div>
    <div id='js-debug-green'></div>
  </article>
</body>

【讨论】：