Tengo una interfaz de usuario móvil con su propio botón Atrás de la interfaz de usuario en la esquina inferior izquierda de la ventana gráfica.
NB En este caso, la interfaz de usuario es una superposición que aparece sobre la página web que se visita, por lo que soy fanático de
History.pushState(), en este caso, no tengo ninguna intención específica de mantener un historial navegable de vistas superpuestas usandoHistory.pushState().
Si el usuario ha avanzado en la superposición de la interfaz de usuario en dos o más vistas, entonces, cada vez que se haga clic o toque el botón Atrás de la interfaz de usuario, la superposición de la interfaz de usuario debería mostrar la vista anterior.
Me di cuenta de que mi botón Atrás de la interfaz de usuario puede ser bastante sensible y es fácil interactuar inadvertidamente con él, de modo que EventListener piense que se ha tocado dos o incluso tres veces , cuando la intención del usuario es simplemente tocarlo una vez .
Evidentemente, se necesita algún tipo de antirrebote , ya que podríamos usar más comúnmente con un onscroll o onresize .
He escrito antirrebotes antes de usar las funciones setTimeout( setTimeout() con nombre y usar clearTimeout() para cancelar repetidamente el setTimeout() con nombre, de modo que solo se active un evento de scroll o cambio de resize (el último).
Pero un antirrebote con funciones clearTimeout() repetidas se siente demasiado elaborado en este contexto.
Idealmente, estoy buscando una forma simple, rápida, fácil y no detallada de desactivar momentáneamente EventListener después de que se haya detectado el primer clic.
Podría usar removeEventListener() , pero esto requiere, en cada implementación, un conocimiento específico del formato del addEventListener() original
Podría usar AbortSignal , pero esto requiere que signal se configure en el parámetro de options del addEventListener() original y no puedo contar con eso
¿Existe un enfoque simple y genérico para eliminar eventos onclick ?
Hay una forma inesperadamente simple de eliminar el rebote de un evento onclick , que requiere solo dos líneas de javascript.
El enfoque establece la propiedad CSS pointer-events de EventTarget en none antes de restablecerlo a auto momentos después:
const myFunction = (e) => { e.target.style.setProperty('pointer-events', 'none'); setTimeout(() => {e.target.style.setProperty('pointer-events', 'auto')}, 800); // REST OF FUNCTION HERE }Ejemplo de trabajo:
const myElement = document.querySelector('.my-element'); const myFunction = (e) => { e.target.classList.add('unclickable'); setTimeout(() => {e.target.classList.remove('unclickable')}, 2000); console.log('myElement clicked'); } myElement.addEventListener('click', myFunction, false); .my-element { width: 100px; height: 100px; line-height: 100px; text-align: center; font-family: sans-serif; font-weight: 900; color: rgb(255, 255, 255); background-color: rgb(255, 0, 0); transition: opacity 0.3s linear; cursor: pointer; } .my-element.unclickable { opacity: 0.5; pointer-events: none; } <div class="my-element">Click me!</div>