I have found this post to be helpful but this is still not exactly what I am trying to accomplish: How do I handle a click anywhere in the page, even when a certain element stops the propagation?
I divided my page into sections so that you can vertically scroll through my horizontal pages. Each section takes up a full page.
I have a video on the 1st section & I want to trigger a click event that removes the video upon clicking anywhere on that page & jumps to section 2, which I achieved already with the below. However, this now triggers the page jump if I am clicking anywhere on my 6 pages & I just want this to trigger on the video page with section id="main"
Is there a way to be even more specific? I tried to insert another location.href to the main page before/after the body in the 2nd line but this did not work.
video = document.getElementById('video')
document.body.addEventListener('click', () => {
if (video.style.display === "block") {
} else {
video.style.display ="none" && (location.href ="#About")
}
},true);You could check the id of the click-target before triggering the action, like so:
video = document.getElementById('video')
document.body.addEventListener('click', ({ target }) => {
if (target.id === 'video') {
video.style.display = "none";
location.href ="#About";
}
}, true);
Alternatively you could attach the click-handler on the element you care about and thereby avoid triggering the handler too often, like so:
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);