从另一个事件目标中移除事件监听器

Question

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

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

-But I can't remove the event to the green element from the "red event" // 我不能从"green event"中移除到red element的事件，我不懂为什么。

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

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>

Answer 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>

从另一个事件目标中移除事件监听器

Remove event listener from another event target

javascript

removeeventlistener