Actualmente estoy tratando de eliminar un detector de eventos al hacer clic en un botón (ver el código a continuación) pero nunca funciona, sé que se supone que debo usar la misma función para cancelar el evento (aquí KeyboardControl) pero no parece estar trabajando en absoluto. Gracias por adelantado
<button class="start">start</button> <button class="stop">stop</button> const start = document.querySelector(".start") const stopbtn = document.querySelector(".stop") start.addEventListener("click", () => keyboardControl()) stopbtn.addEventListener("click", () => { document.removeEventListener("keydown", keyboardControl) }) function keyboardControl() { document.addEventListener("keydown", (e) => { switch(e.keyCode) { case 37: //left arrow key console.log("left") break case 39: console.log("right") break } }) }Debe pasar la misma función para removeEventListener que pasó para addEventListener . La función que está pasando a addEventListener es
(e) => { switch(e.keyCode) { case 37: //left arrow key console.log("left") break case 39: console.log("right") break } }Como no está almacenando una referencia a él en ningún lugar, no puede eliminarlo. Asigne esa función a la variable y utilícela para agregarla y eliminarla:
const start = document.querySelector(".start") const stopbtn = document.querySelector(".stop") function handleKey(e) { switch (e.keyCode) { case 37: //left arrow key console.log("left") break case 39: console.log("right") break } } function keyboardControl() { document.addEventListener("keydown", handleKey); } start.addEventListener("click", () => keyboardControl()) stopbtn.addEventListener( "click", () => document.removeEventListener("keydown", handleKey) ) <button class="start">start</button> <button class="stop">stop</button> Eliminar keyboardControl no funciona por varias razones:
keyboardControl nunca se vincula como un controlador de eventos a document .