如何從JavaScript中的多個元素中刪除事件偵聽器？

我在一個紙牌遊戲，用戶必須從一組的4卡的工作如果它是一個王牌，然後他們贏了如果沒有的話，他們輸了。但我有一些麻煩，從一組牌去除點擊的事件偵聽器的第一張牌已經被點擊之後。如何從JavaScript中的多個元素中刪除事件偵聽器？

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

來源

2016-02-28 seanrs97

您可以定義「麻煩」？你是否收到錯誤信息？ –

@MatthewHerbst不，有沒有錯誤消息。問題是它不會從卡片組中刪除點擊事件。該程序可以識別該卡不應被點擊的錯誤信息仍然有效，但click事件仍然在積極卡。 – seanrs97

你有一套卡。說4.播放器使用點擊選擇一張卡片。一旦他這麼做，你想從其餘3張卡片中刪除點擊事件。我是否正確？ – akinuri

您正在使用循環添加點擊事件，因爲您有多張卡片。

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>

來源

2016-02-28 19:53:04 akinuri

就是這樣，三江源這麼多！我知道這會是一件愚蠢的事情。 – seanrs97

我不知道你的卡陣列的樣子，但我已經填補了剩下的a codepen，它似乎被成功刪除事件監聽。例如，你的卡片數組是否引用特定的DOM元素？

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

來源

2016-02-28 20:38:21

如何從JavaScript中的多個元素中刪除事件偵聽器？

回答

相關問題