如何仅从执行事件的一个 div 中删除事件

Question

let popped = 0;

document.addEventListener('click', function(e){

if (e.target.className === "balloon"){
    
            e.target.style.backgroundColor = "#ededed";
            e.target.textContent = "POP!";
            popped++;
            removevent(e);               
            checkAllPopped();
}   

});

function removevent(e) {
    e.target.removeEventListener('click',function() {})
}

一旦用户单击 div，我就会尝试删除该事件。但无论我如何尝试放置 removeEventListenever 它都不起作用。我试过用自定义函数来做：

function abc(e) {
//some code
}
document.addEventListener('click',abc,true)
document.removeEventListener('click',abc,true)

不过，这也没有成功。

Answer 1

如果您想逐个删除事件侦听器，请考虑为每个气球添加单独的事件侦听器。然后，在处理函数中，您可以在每个气球“弹出”时将其从每个气球中移除。

let popped = 0;

const balloons = document.querySelectorAll('.balloon');

function handler(e){
    if (e.target.className === "balloon"){
      e.target.style.backgroundColor = "#ededed";
      e.target.textContent = "POP!";
      popped++;
      console.log(popped);
      e.target.removeEventListener('click', handler);
    }
  }

for (let balloon of balloons) {
  balloon.addEventListener('click', handler);
}

<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>