如何從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> 

Answer 2

我不確定您的卡陣列是什么樣的，但是其余的我都裝在了一個代碼筆上 ，它似乎已成功刪除了eventListener。 例如，您的卡陣列是否引用了特定的DOM元素？

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