问题描述
我有一些代码，当在对象内部调用时，会将页面上的元素绑定到单击。当我再次按下开始按钮时，元素将被更新，并且我将添加事件监听器以再次单击。在再次添加偶数侦听器之前，我先解除绑定事件监听器，它触发10次以解除绑定...然后绑定，并触发10次以读取绑定...但是。当我检查元素或单击元素时，它会触发两次。如果我再次点击开始，它现在会触发三遍...
card.clickFn = function() {
if(Game.cardsClickedHistory.length<2 && Game.status==1){
card.element.style.backgroundImage = card.image;
Game.cardClicked(card); // notify a card clicked
}
}
card.element.removeEventListener("click",card.clickFn);
card.element.addEventListener("click",card.clickFn);
可重复的示例
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.card {width: 200px; height: 200px; background: red; margin: 10px;}
</style>
</head>
<body>
<div id="cards">
<div class="card"></div>
<div class="card"></div>
</div>
<button id="rebind">REBIND</button>
<script>
var Card = function(element){
var card = this;
card.element = element;
card.clickFn = function(){
console.log("Clicked card");
}
card.element.removeEventListener("click",card.clickFn);
}
var CardFactory = function()
{
var cf = this;
cf.cardDivs = document.getElementsByClassName("card");
cf.build = function(){
for(var i=0;i<cf.cardDivs.length; i++)
{
new Card(cf.cardDivs[i]);
}
}
}
var oCF = new CardFactory();
oCF.build();
document.getElementById("rebind").addEventListener("click",oCF.build)
</script>
</body>
</html>
解决方法
当通过调用构造函数new Card(cf.cardDivs[i]);实例化Card对象时，构造函数将创建新函数，该函数不是上次构造中的先前函数。因此，当它尝试删除侦听器时，显然找不到先前的侦听器。为了避免这种情况，您可以设置一个 static 变量（listeners），该变量存储绑定的侦听器。然后在build()函数的下一个刻度上可以轻松地找到准确记录的先前绑定函数作为侦听器。我在您的代码中添加了一些有效的功能。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.card {width: 200px; height: 200px; background: red; margin: 10px;}
</style>
</head>
<body>
<div id="cards">
<div class="card"></div>
<div class="card"></div>
</div>
<button id="rebind">REBIND</button>
<script>
var Card = function(element){
var card = this;
card.element = element;
card.clickFn = function(){
console.log("Clicked card");
}
var listener=Card.listeners.filter(function(lis){ return lis.ele===element })[0];
if(listener!==undefined){
card.element.removeEventListener("click",listener.func);
Card.listeners=Card.listeners.filter(function(lis){return lis.ele!==element}); // remove previous listener record
}
card.element.addEventListener("click",card.clickFn);
Card.listeners.push({ele:element,func:card.clickFn}); // add record of listener
}
Card.listeners=[]; //static member
var CardFactory = function()
{
var cf = this;
cf.cardDivs = document.getElementsByClassName("card");
cf.build = function(){
for(var i=0;i<cf.cardDivs.length; i++)
{
new Card(cf.cardDivs[i]);
}
}
}
var oCF = new CardFactory();
oCF.build();
document.getElementById("rebind").addEventListener("click",oCF.build)
</script>
</body>
</html>