javascript - 为什么不能删除兄弟节点上的事件监听器？

Question

function show1() {
  console.log("ok1");
  document.getElementById("a2").removeEventListener("click", delegate);
}

function show2() {
  console.log("ok2");
}

function show3() {
  console.log("ok3");
}

function delegate(event) {
  var flag = event.target;
  switch (flag.id) {
    case "a1":
      show1();
      break;
    case "a2":
      show2();
      break;
    case "a3":
      show3();
      break;
  }
}

ob = document.getElementById("tl");
ob.addEventListener("click", delegate);

<ul id="tl">
  <li id="a1">a1</li>
  <li id="a2">a2</li>
  <li id="a3">a3</li>
</ul>

父节点ul包含三个子节点li，在父节点上绑定(bind)一个事件监听器，让ul委托(delegate)所有节点的事件监听.
我的期望:
当您点击 a1 时，show1 函数将删除其 id 为 a2 的同级函数上的事件监听器。
也就是说，你点击id为a1的li后，点击id为a2的li，ok2 将不会显示在控制台上。

实际行动:
点击id为a1的li后，点击id为a2的li，ok2 将显示在控制台上。

为什么

document.getElementById("a2").removeEventListener("click",delegate);

无法删除兄弟节点上的事件监听器？
如何修复它？

Answer 1

如果监听器附加到某个元素，则删除它唯一可以做的就是从同一元素中删除相同的监听器 - 您无法从子元素中删除它，因为它没有附加到子元素.

对于您正在寻找的功能，您可以将要从中“删除”点击功能的节点添加到 Set 中，并在父节点的处理程序中检查 event.target(flag 变量)未包含在该 Set 中:

const elementsToIgnore = new Set();
function show1() {
  console.log("ok1");
  elementsToIgnore.add(document.getElementById("a2"));
}

function show2() {
  console.log("ok2");
}

function show3() {
  console.log("ok3");
}

function delegate(event) {
  var flag = event.target;
  if (elementsToIgnore.has(flag)) return;
  switch (flag.id) {
    case "a1":
      show1();
      break;
    case "a2":
      show2();
      break;
    case "a3":
      show3();
      break;
  }
}

ob = document.getElementById("tl");
ob.addEventListener("click", delegate);

<ul id="tl">
  <li id="a1">a1</li>
  <li id="a2">a2</li>
  <li id="a3">a3</li>
</ul>