Tratando de eliminar los oyentes de eventos de la tecla y hacer clic en eventos, pero mi código parece no funcionar. No estoy seguro de dónde está el problema; nuevo en JS y tratando de solucionarlo. ¿Necesito mover removeEventListeners fuera de la función?

const togglePopupAlt = () => {
    const popupList = Array.from(document.querySelectorAll(".popup"));
    popupList.forEach((modal) => {
        modal.addEventListener("click", (evt) => {
        togglePopup(evt.target);
        });
    });
    popupList.forEach((modal) => {
        modal.removeEventListener("click", (evt) => {
        togglePopup(evt.target);
        });
    });

    popupList.forEach(() => {
        
        document.addEventListener("keydown", (evt) =>{
            const escKey = 27;
            if (evt.keyCode === escKey){
                togglePopup(document.querySelector(".popup_active"));
            }
        });
        document.removeEventListener("keydown", (evt) =>{
            const escKey = 27;
            if (evt.keyCode === escKey){
                togglePopup(document.querySelector(".popup_active"));
            }
        });
   });
}

togglePopupAlt();
0
Elena C 26 jun. 2020 a las 19:51

2 respuestas

Cuando elimina un detector de eventos, debe pasar una referencia a la función que se configuró como controlador, por lo tanto, no puede eliminar los detectores de eventos que se agregaron como funciones anónimas. Solo se pueden eliminar las funciones con nombre.

function handler(){
  console.log("Handled!");
}

document.querySelector("button").addEventListener("click", handler);

document.getElementById("remove").addEventListener("click", function(){
  document.querySelector("button").removeEventListener("click", handler);
});
<button>Click Me</button>

<button id="remove">Remove Handler</button>
0
Scott Marcus 26 jun. 2020 a las 16:58

Debe pasar el mismo controlador en removeEventListener que está pasando en addEventListener

const handler = () => doSomeThing()

element.addEventListener("click", handler)

// Then remove them like this.
element.removeEventListener("click", handler)

Como está creando una nueva función cada vez que realiza un bucle, almacene esos controladores en una matriz y use los mismos controladores en removeListener para cada elemento.

Como la lógica de los manejadores es la misma para todos los elementos, puede hacer esto:

const modalHandler = (evt) => {
  togglePopup(evt.target);
};

const keyDownHandler = (evt) => {
  const escKey = 27;
  if (evt.keyCode === escKey) {
    togglePopup(document.querySelector(".popup_active"));
  }
};

const togglePopupAlt = () => {
  const popupList = Array.from(document.querySelectorAll(".popup"));
  popupList.forEach((modal) => {
    modal.addEventListener("click", modalHandler);
  });
  popupList.forEach((modal) => {
    modal.removeEventListener("click", modalHandler);
  });

  popupList.forEach(() => {
    document.addEventListener("keydown", keyDownHandler);
    document.removeEventListener("keydown", keyDownHandler);
  });
};

togglePopupAlt();
2
Subesh Bhandari 26 jun. 2020 a las 17:27