eventListener多次发射并增加

  • Z时代
  • 2024-01-10
  • 分类：问答

在点击功能中，我可以选择播放音频。eventListener多次发射并增加

点击只会触发一次（在我添加了.off()后，我似乎必须为每个点击事件执行操作，因为我认为我从根本上无法了解javascript的工作原理），但添加到“结束“的监听程序显示它触发按钮被点击的次数。我猜想.play()也被解雇多次。

这些需要在点击事件内部才能得到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事件的点击事件外，你点击按钮

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

回答：

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

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

这是反复添加事件监听器button.If你需要这个单击事件中，检查它是否已经存在。如果有，请不要重新添加。

回答：

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

回答：

你有你的任务完成后，删除注册的事件侦听器，每次要注册的事件。

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

或者你可以做的是将注册事件监听器的逻辑移动到单击事件监听器之外。像这样，该活动将只被注册一次。

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

回答：

每次单击该按钮时，新的事件侦听器将被添加到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多次发射并增加 的全部内容， 来源链接： utcz.com/qa/262441.html

回到顶部