0
165
VistasCómo evitar que la función/evento se dispare varias veces
Hay un problema con la función createResetHandler .
El evento de la función createResetHandler se activa varias veces.
Visto aquí: https://jsfiddle.net/oxjzmk18/
Para reproducir, cuando aparezca el botón de salida en la pantalla, haga clic en él varias veces.
Al hacer clic en el botón de salida varias veces, el evento se activa varias veces.
Tienes que hacer clic con el ratón en el botón de salida más de 1 vez.
¿Cómo evito eso, para que solo dispare 1 vez?
¿Cómo se arregla eso en el código?
function createResetHandler(player) { const resetVideo = document.querySelectorAll(".exit"); resetVideo.forEach(function resetVideoHandler(video) { video.addEventListener("click", function resetVideoHandler() { player.destroy(); console.log("createResetHandler"); }); }) } 
1 Respuestas
Responde la pregunta0
Esto podría funcionar.
Adjunte el controlador de eventos solo al botón de salida activo, document.querySelector podría ser una mejor opción en este caso.
const resetVideo = document.querySelectorAll(".container.active .exit"); adjunte el evento con once: true , por lo que el controlador de eventos se elimina una vez que se activa el evento.
function createResetHandler(player) { const resetVideo = document.querySelectorAll(".container.active .exit"); resetVideo.forEach(function resetVideoHandler(video) { video.addEventListener("click", function resetVideoHandler() { player.destroy(); console.log("removePlayer"); }, { once: true }); }) }https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
- una vez
Un valor booleano que indica que el agente de escucha debe invocarse como máximo una vez después de agregarse. Si es verdadero, el detector se eliminará automáticamente cuando se invoque.
O usando removeEventListener
function createResetHandler(player) { const resetVideo = document.querySelectorAll(".container.active .exit"); resetVideo.forEach(function resetVideoHandler(video) { const resetVideoHandler = () => { video.removeEventListener("click", resetVideoHandler); player.destroy(); console.log("removePlayer"); }; video.addEventListener("click", resetVideoHandler); }) }