如何从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中的多个元素中删除事件侦听器？

回答

相关问题