2

No puedo quitar el EventListener del click izquierdo y, después de llamar a removeEventListener, el console log continua mostrándose después de clicar en cualquier lugar de la pantalla.

He hecho algunas pruebas y el problema es el bind de handleClickOutside porque si llamo a la función sin argumentos, removeEventListener funciona.

PD: No sé como tipar el evento y el SetIsModalOpened (setState).

Mi código:

  // TODO: change typo of "e" and "setIsModalOpened"
  const showModal = (e: any, isModalOpened: boolean, setIsModalOpened: any): void => {
    const elementId = e.currentTarget.id;
    if (!isModalOpened) {
      window.addEventListener('mousedown', (e) => handleClickOutside(e, elementId, setIsModalOpened));
    }
    setIsModalOpened(!isModalOpened);
  }

  // TODO: change typo of "e" and "setIsModalOpened"
  const handleClickOutside = (e: any, elementId: string, setIsModalOpened: any) => {
    if (e.target.id !== elementId) {
      setIsModalOpened(false); 
    }
    window.removeEventListener('mousedown', (e) => handleClickOutside(e, elementId, setIsModalOpened));
  }

Muchas gracias!

4
  • Please translate your Question, this is Stack Overflow in Spanish
    – Jesús
    Commented el 24 sept. 2019 a las 15:14
  • 1
    Perdón, es la primera vez que uso esta plataforma. Gracias por el comentario!
    – user142753
    Commented el 24 sept. 2019 a las 15:43
  • Por favor no pongas capturas de código, pon el código. Commented el 24 sept. 2019 a las 16:11
  • Hecho! muchas gracias
    – user142753
    Commented el 24 sept. 2019 a las 16:15

1 respuesta 1

0

Tu problema es que estás pasando dos funciones anónimas (e) => distintas, las cuales dentro invocan a handleClickOutside. Lo que debes hacer es pasar handleClickOutside como parámetro de los listeners, algo como:

window.addEventListener('mousedown', handleClickOutside);

Si quieres pasar parámetros adicionales a tu función, podrías usar handleClickOutside.bind(this) para atar el contexto de this o los parámetros que requieras. Aplicado a tu problema (excluyendo React/Typescript)

const handleClickOutside = (e, elementId, setIsModalOpened, otro) => {
  console.log(this); // saldra `undefined` por el contexto en que se ejecuta en S.O.
  console.log(`1:${e}`);
  console.log(`2:${elementId}`);
  console.log(`3:${setIsModalOpened}`);
  console.log(`4:${otro}`);
};
handleClickOutside.bind(
  this,
  'tu evento',
  'el elementId correspondiente',
  'si está abierto o no tu modal'
)('cualquier cosa extra que quieras agregar');

2
  • La cuestión es que usando Hooks y también arrow functions ya se hace el bindeo de la función. De esa forma no puedo hacerlo. Gracias!!
    – user142753
    Commented el 25 sept. 2019 a las 10:36
  • @user142753 la arrow function no aplicaría, porque lo que te sugiero en la respuesta es que las saques. Y hooks tampoco tiene relación, porque lo que estás tratando de manejar está fuera del contexto de los hooks. Quizás no me expliqué correctamente, pero revisa mi respuesta actualizada. Commented el 27 sept. 2019 a las 0:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.