删除循环javascript内部的事件侦听器

只需向事件侦听器添加{Once:true}选项。无需为其编写代码。试试这些

cardDeck[i].addEventListener('click', flip, {once:true} )

这是JSFIDLE link

此的参考链接。 Here

PS: 将evenListener添加到每个元素的方式效率不高。如果您的用例可能的话,使用委派而不是冒泡。这是提琴 delegation

您可以绑定到 onclick 方法,而不是使用 addEventListener 。因此,在执行单击后,只需设置 onclick(单击) 到 null :

var cardDeck = document.getElementById('listDeck').getElementsByTagName('li')

for (var i = 0; i < cardDeck.length; i++) {
  cardDeck[i].onclick = flip.bind(cardDeck[i])
}

function flip(e) {
  if (e.target && e.target.nodeName == "LI") {
    var firstMove = document.getElementById(e.target.id)
    firstMove.classList.add('open', 'show')
    console.log(e.target.id + 'card was clicked');
    this.onclick = null;
  }
}

如果通过添加事件处理程序 addEventListener ,可以使用以下方法将其删除:

element.removeEventListener(event, function);

这允许您有选择地删除事件处理程序,而不删除可能已注册的任何其他处理程序。

function flip(e) {
    if (e.target && e.target.nodeName == "LI") {
        var firstMove = document.getElementById(e.target.id);
        firstMove.classList.add('open', 'show');
        console.log(e.target.id + 'card was clicked');
        e.currentarget.removeEventListener('click', flip);
    }
}

如果要在调用事件侦听器时删除它,可以使用 removeEventListener 在DOM元素上,如下所示:

 var cardDeck = document.getElementById('listDeck').getElementsByTagName('li')

    for (var i = 0; i < cardDeck.length; i++) {
      cardDeck[i].addEventListener('click', flip, false)
    }

    function flip(e) {
    //remove the event listener.
    this.removeEventListener("click",flip);
      if (e.target && e.target.nodeName == "LI") {
      var firstMove = document.getElementById(e.target.id)
      firstMove.classList.add('open', 'show')
        console.log(e.target.id + 'card was clicked');
      }
    }