Question

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

点击只会被触发一次（在我添加.off()之后，我似乎必须为每次点击活动做一些事情，因为我认为我从根本上没有了解javascript的方式工作）但功能添加到＆＃34;结束＆＃34;监听器显示它正在触发按钮被单击的次数。我认为.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");
        });
    }
});

Answer 1

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

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

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

Answer 2

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

Answer 3

将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 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="">

eventListener多次触发并增加

5 个答案: