Question

我正在制作纸牌游戏，用户必须从一组4中选择一张牌。如果是Ace，那么他们就赢了，如果没有，那么他们输了。但是在点击第一张卡片后，我在从卡片组中删除点击事件监听器时遇到了一些麻烦。

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

这是一个有效的演示。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

var a = document.getElementById('A');
var b = document.getElementById('B');
var c = document.getElementById('C');
var card = [a, b, c];

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

2 个答案: