He encontrado que esta publicación es útil, pero esto todavía no es exactamente lo que estoy tratando de lograr: ¿Cómo manejo un clic en cualquier parte de la página, incluso cuando cierto elemento detiene la propagación?
Dividí mi página en secciones para que puedas desplazarte verticalmente por mis páginas horizontales. Cada sección ocupa una página completa.
Tengo un video en la primera sección y quiero activar un evento de clic que elimine el video al hacer clic en cualquier parte de esa página y salte a la sección 2, que ya logré con lo siguiente. Sin embargo, esto ahora activa el salto de página si hago clic en cualquier parte de mis 6 páginas y solo quiero que esto se active en la página de video con la sección id="main"
¿Hay alguna manera de ser aún más específico? Intenté insertar otro archivo location.href en la página principal antes/después del cuerpo en la segunda línea, pero no funcionó.
video = document.getElementById('video') document.body.addEventListener('click', () => { if (video.style.display === "block") { } else { video.style.display ="none" && (location.href ="#About") } },true);Puede verificar la identificación del objetivo del clic antes de activar la acción, así:
video = document.getElementById('video') document.body.addEventListener('click', ({ target }) => { if (target.id === 'video') { video.style.display = "none"; location.href ="#About"; } }, true);Alternativamente, puede adjuntar el controlador de clic en el elemento que le interesa y, por lo tanto, evitar activar el controlador con demasiada frecuencia, así:
document.getElementById('video').addEventListener('click', ({ currentTarget }) => { // `currentTarget` refers to the element the handler has been attached to currentTarget.style.display = "none"; location.href ="#About"; }, true);