javascript - eventListener多次触发并增加

在单击功能上，我可以选择播放音频。

单击仅触发一次(在我添加了.off()之后，我似乎必须为每个click事件执行一次，因为我认为我从根本上不了解javascript的工作原理)，但是添加到“结束”监听器的函数显示了它触发了单击按钮的次数。我认为.play()也被多次触发。

这些需要在click事件中才能获取ID，因此在使用js时，如何在这里和其他地方阻止此类事情的发生？到处添加event.stopPropagation()，event.bubbles = false和.off()似乎是不必要的(在这种情况下，也没有任何区别)。

$('.button').off().on('click', function(event){
    event.stopPropagation();
    event.bubbles = false;
    var id = $(this).attr('id')
    if ($(this).hasClass('hasAudio')) {
        document.getElementById('audio_'+id).play();
        document.getElementById('audio_'+id).addEventListener("ended", function(){
            console.log("ended");
        });
    }
});

最佳答案

将ended事件移到click事件之外，每次单击按钮时都在注册该事件

$('.button').on('click', function(event){
    var id = $(this).attr('id')
    if ($(this).hasClass('hasAudio')) {
        document.getElementById('audio_'+id).play();

    }
});
$('[id^="audio_"]').on("ended", function(){
    console.log("ended");
 });