CODEWITHSUNDEEP
javascriptscrolltriggersclick
Roman
Roman

Reputation: 1168

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

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?

Upvotes: 0

Views: 1364

Answers (4)

gaetanoM
gaetanoM

Reputation: 42054

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.....
    }
}

Upvotes: 1

Mike
Mike

Reputation: 617

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

Upvotes: 1

tdev
tdev

Reputation: 156

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'); // ????
          }          

        }
      }
    }

Upvotes: 1

aseferov
aseferov

Reputation: 6393

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
    }
  }
}

Upvotes: 1

Related Questions