javascript - 如何从 JavaScript 中的多个元素中删除事件监听器？

Question

我正在开发一款纸牌游戏，用户必须从一组 4 张纸牌中选择一张纸牌。如果它是 A，那么他们就赢了，否则他们就输了。但是在单击第一张卡片后，我在从卡片集中删除 click 的事件监听器时遇到了一些问题。

for(var i = 0; i < card.length; i++)
{
  card[i].addEventListener("click",display);
}

function display()
{
   this.setAttribute("src","CardImages/" + deck[this.id] + ".jpg");
   this.setAttribute("class","highlight");
   if(firstGo == 0)
   {
     firstGo++;
     firstCard = this;
     this.removeEventListener("click",display);
     console.log("card" + deck[this.id]);
   }
   else
   {
     alert("You've already selected a card");
     this.removeEventListener("click",display);
   }
}

Answer 1

您正在使用循环添加点击事件，因为您有多张卡片。

for(var i = 0; i < card.length; i++) {
    card[i].addEventListener("click", display);
}

但是您正在使用

删除事件监听器

this.removeEventListener("click",display);

这只会删除您单击的卡片上的监听器。如果你也想移除其他卡片上的监听器，你也应该循环移除它们。

function display() {
    this.setAttribute("src","CardImages/" + deck[this.id] + ".jpg");
    this.setAttribute("class","highlight");
    if (firstGo == 0) {
        firstGo++;
        firstCard = this;
        // this.removeEventListener("click",display);
        for (var i = 0; i < card.length; i++) {
            card[i].removeEventListener("click", display);
        }
        console.log("card" + deck[this.id]);
    } else {
        alert("You've already selected a card");
        // this.removeEventListener("click",display);
        for (var i = 0; i < card.length; i++) {
            card[i].removeEventListener("click", display);
        }
    }
}

这是一个工作演示。

var cards = document.getElementsByClassName("card");

for (var i = 0; i < cards.length; i++) {
  cards[i].addEventListener("click", display);
}

function display() {
  this.classList.add("highlight");
  for (var i = 0; i < cards.length; i++) {
    cards[i].removeEventListener("click", display);
  }
}

.card {
  float: left;
  padding: 50px 40px;
  border: 1px solid rgba(0,0,0,.2);
  margin: 5px;
  background: white;
}
.card:hover {
  border: 1px solid rgba(0,0,255,.4);
}
.card.highlight {
  border: 1px solid rgba(0,200,0,.5);
}

<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>