eventListener多次触发并增加

Question

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

点击只被触发一次（在我添加.off() ，我似乎必须为每个点击事件做，因为我认为我从根本上没有得到关于javascript如何工作的东西）但是函数添加到了“结束” “监听器显示它正在点击按钮被点击的次数。 我认为.play()也被多次.play() 。

这些需要在click事件中获取id，所以当使用js时，如何在这里和其他地方阻止这些事情的发生？ 在任何地方添加event.stopPropagation() ， event.bubbles = false和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");
        });
    }
});

Answer 1

将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");
 });

Answer 2

这会失败，因为每次单击该函数时，都会向该按钮添加一个新的事件侦听器。

        document.getElementById('audio_'+id).addEventListener("ended", function(){
        console.log("ended");

这是重复将事件监听器添加到按钮。如果您在click事件中需要这个，请检查它是否已存在。 如果是，请不要再次添加。

Answer 3

使用全局标志，定义您是要暂停还是播放。 并且还使用preventDefault（在使用任何内联点击事件的情况下）。

Answer 4

您必须在任务完成后删除已注册的事件侦听器。

document.getElementById('audio_'+id).removeEventListener("ended", function(){
        console.log("ended");
    });

或者你可以做的是移动在click事件监听器之外注册事件监听器的逻辑。 像这样，活动只会被注册一次。

document.getElementById('audio_'+id).addEventListener("ended", function(){
        console.log("ended");
    });
}

$('.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();
});

Answer 5

每次单击该按钮时，都会向已ended事件添加新的事件侦听器。 为了防止您可以尝试预先定义回调函数。 这将阻止您的事件侦听器一遍又一遍地添加到事件循环中。

匿名函数没有签名，因此当您使用它定义事件时，它会认为这应该是一个新的事件侦听器并多次调用它。 检查工作片段以查看差异。 在输入框中键入内容以查看发生的情况。

如果这令人困惑，那么removeEventListener可以是下一个选项。

function ended(event){
    console.log("ended");
}

$('.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", ended);
    }
});

 var input = document.getElementById('some'); function callback(event) { console.log("PRINT"); } input.addEventListener("keyup", callback) // input.removeEventListener("keyup", callback) input.addEventListener("keyup", callback) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="some" value="" > 

匿名函数作为回调

 var input = document.getElementById('some'); input.addEventListener("keyup", function(event) { console.log("PRINT"); }) // input.removeEventListener("keyup", callback) input.addEventListener("keyup", function(event) { console.log("PRINT"); }) 

 <input id="some" value="">