如何从 JavaScript 中的多个元素中删除事件侦听器

How can i remove an event listener from multiple elements in JavaScript?

本文关键字：元素 删除 事件 侦听器 JavaScript      更新时间：2023-09-26

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

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);
   }
}

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

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>

我不确定你的卡片数组是什么样子的，但我在代码笔上填写了其余部分，它似乎成功删除了 eventListener。例如，您的卡阵列是否引用了这样的特定 DOM 元素？

var a = document.getElementById('A');
var b = document.getElementById('B');
var c = document.getElementById('C');
var card = [a, b, c];
相关文章：