How to trigger click event on element only once while scrolling?

Question

While listening to scrolling I want to trigger click event on an element only once. This event should scroll to an element. My code sofar:

window.addEventListener('scroll', () => {
  window.onscroll = slideMenu;
  if (window.scrollY > elementTarget.offsetTop) {
    const scrolledPx = (window.scrollY - elementTarget.offsetTop);

    if (scrolledPx > 100) {
      const link = document.getElementById('2');          
      link.click();
      link.removeEventListener('click'); // ????
    }
  }
}

The problem is that while I meet the condition scrolledPx > 100 - it keeps triggerring the link.click() event. Any ideas how to do it?

Possible duplicate of Only fire an event once?

devlin carnate
– devlin carnate

2019-01-15 18:36:21 +00:00
Commented Jan 15, 2019 at 18:36 — devlin carnate
– devlin carnate, Commented Jan 15, 2019 at 18:36

aseferov · Accepted Answer · 2019-01-15 18:31:15Z

1

Define variable and check it conditinal

let disableClick = false
window.addEventListener('scroll', () => {
  window.onscroll = slideMenu;
  if (window.scrollY > elementTarget.offsetTop) {
    const scrolledPx = (window.scrollY - elementTarget.offsetTop);

    if (scrolledPx > 100 && !disableClick) {          
      const link = document.getElementById('2');          
      link.click();
      disableClick = true
    }
  }
}

answered Jan 15, 2019 at 18:31

aseferov

6,4133 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roman Over a year ago

This works great. How would it be possible to reset the disable click to false once the scrolling down is changed to scrolling up and the if (scrolledPx > 100 ) condition is reached?

aseferov Over a year ago

If i understand true you can reset it inside if (scrolledPx < 100 && disableClick) this condition

tdev · Accepted Answer · 2019-01-15 18:32:27Z

1

Use helper boolean variable:

let clicked = false;    
window.addEventListener('scroll', () => {
      window.onscroll = slideMenu;
      if (window.scrollY > elementTarget.offsetTop) {
        const scrolledPx = (window.scrollY - elementTarget.offsetTop);

        if (scrolledPx > 100) {
          if(!clicked) {
             const link = document.getElementById('2');
             link.click();
             clicked = true;
             link.removeEventListener('click'); // ????
          }          

        }
      }
    }

answered Jan 15, 2019 at 18:32

tdev

1564 bronze badges

Comments

Mike · Accepted Answer · 2019-01-15 18:41:50Z

You need to check if the link was previously clicked, or remove the scroll event listener. I think that latter is a better solution as scroll event listeners fire quite frequently, and if you only need it once, might as well not have the extra overhead.


// Method 1
var didClick = false;
window.addEventListener('scroll', () => {
  window.onscroll = slideMenu;
  if (window.scrollY > elementTarget.offsetTop) {
    const scrolledPx = (window.scrollY - elementTarget.offsetTop);

    if (scrolledPx > 100 && didClick === false) {
      const link = document.getElementById('2');          
      link.click();
      didClick = true;
    }
  }
}  

// Method 2

function myScrollHandler(){
 window.onscroll = slideMenu; // You may want to move this elsewhere
  if (window.scrollY > elementTarget.offsetTop) {
    const scrolledPx = (window.scrollY - elementTarget.offsetTop);

    if (scrolledPx > 100 && didClick === false) {
      const link = document.getElementById('2');          
      link.click();
      window.removeEventListener('scroll', myScrollHandler); // ????
   }
  }
}

window.addEventListener('scroll', myScrollHandler);

gaetanoM · Accepted Answer · 2019-01-15 18:43:38Z

1

Instead of using a global variable you may consider to add a new boolean property to your element:

if (scrolledPx > 10) {
    const link = document.getElementById('2');
    // stopclik  is undefined at beginning
    if (link.stopclik == undefined) {
        link.click();
        link.stopclik = true;
        // set it to true.....
    }
}

answered Jan 15, 2019 at 18:43

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

2 Comments

Roman Over a year ago

All the solutions work great. Exactly what I asked for. However, I found little problem with the solution. While scrolling down the click event is triggered but if I scroll further the scroll to element that I used the click for stops working and it doesn't finish scrolling to the element. How would it be possible to prevent it? Maybe call the click event after some time or pixels scrolled?

gaetanoM Over a year ago

@Roman If i understand true you can reset: delete document.getElementById('2').stopclik ;

Collectives™ on Stack Overflow

How to trigger click event on element only once while scrolling?

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related