为什么不能删除兄弟姐妹的事件监听器？

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，在父节点绑定一个事件监听器，让ul委托所有节点的事件监听。
我的期望：
当您单击 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

如果一个侦听器附加到一个元素，您唯一可以做的关于删除它的事情就是从同一个元素中删除同一个侦听器 - 您不能从子元素中删除它，因为它没有附加到子元素。

对于您正在寻找的功能，您可以将您想要 "remove" 点击功能的节点添加到 Set，然后在父节点的处理程序中，检查 "remove" =13=]（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>

Answer 2

这是因为您要将事件侦听器添加到 ul 而不是 li。将 event 处理程序添加到 li，如下所示

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.getElementsByTagName("li");
for(let i=0; i<ob.length; i++){
ob[i].addEventListener("click",delegate);
}

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

为什么不能删除兄弟姐妹的事件监听器？

Why can't remove the event listener on sibling's?

html

javascript

event-listener