Estoy tratando de eliminar un detector de eventos de mi botón después de agregar un detector de eventos, más como anular el código anterior, pero no funciona, traté de consolar el registro, pero da undefined , no estoy seguro de por qué. ¿Qué estoy haciendo mal/perdiendo?
aplicación.js
document.querySelector("button").addEventListener("click", function(){ document.querySelector(".dialog").style.display = "block" setTimeout(()=>{ document.querySelector(".dialog").style.display = "none" }, 2500) }) document.querySelector("button").removeEventListener("click", sayHi); function sayHi(){ console.log('hello') }índice.html
<div class="container"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate in illo omnis vitae molestias natus eaque necessitatibus molestiae nesciunt illum! <button>find out more</button> </div> <div class="dialog" style="display: none;"> <div class="context"> <h1>Hi!</h1> </div> </div>aplicación.css
.container{ width:500px; height: auto; margin:0 auto; } button{ margin:20px auto; display: flex; justify-content: center; cursor: pointer; } .dialog{ width: 100%; height: 100%; background: black; opacity: 0.8; position: absolute; top:0; left:0; display: flex; justify-content: center; } .context{ width: 400px; height: 400px; background: white; margin: auto; display: flex; justify-content: center; align-items: center; }Debe mantener la referencia a la función que desea eliminar de esta manera:
function popup(){ document.querySelector(".dialog").style.display = "block" setTimeout(()=>{ document.querySelector(".dialog").style.display = "none" }, 2500) } document.querySelector("button").addEventListener("click", popup) document.querySelector("button").removeEventListener("click", popup); y la razón es que removeEventListener necesita saber exactamente qué función eliminar de los eventos del target element , porque puede agregar muchas funciones al mismo evento, y si desea eliminar una, debe decir cuál.
Debe especificar una función con nombre en lugar de una función anónima. también necesita activar removeEventListener de alguna manera
Código fijo
const showDialog = ()=>{ document.querySelector(".dialog").style.display = "block" setTimeout(()=>{ document.querySelector(".dialog").style.display = "none" }, 2500) } document.querySelector("button").addEventListener("click", showDialog) //code required to remove event listener //document.querySelector("button").removeEventListener("click", showDialog); document.querySelector("#remove_button").addEventListener("click", ()=>{ document.querySelector("button").removeEventListener("click", showDialog); })He creado un codepen básico para que juegues con él https://codepen.io/jaydave1412/pen/vYWVmLo