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

Question

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

-I可以从这个“红色事件”中移除红色元素的事件//我可以从这个“绿色事件”中移除绿色元素的事件。

-But我不能从"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>

​

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>

​