Is there a way to trigger a click event on a certain section?

June 12, 2022

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);

>Solution :

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);