Как вызвать событие нажатия на элемент только один раз при прокрутке?

Question

При прослушивании прокрутки я хочу вызвать событие щелчка на элементе только один раз. Это событие должно прокрутить до элемента. Мой код софар:

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

Проблема в том, что, хотя я выполняю условие scrolledPx> 100 - оно продолжает вызывать событие link.click (). Есть идеи как это сделать?

Answer 1

Вместо использования глобальной переменной вы можете добавить новое логическое свойство к вашему элементу:

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

Answer 2

Использовать вспомогательную логическую переменную:

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

        }
      }
    } 

Answer 3

Необходимо проверить, была ли ссылка нажата ранее, или удалить прослушиватель события прокрутки. Я думаю, что последнее является лучшим решением, так как слушатели событий прокрутки запускаются довольно часто, и если вам это нужно только один раз, это может привести к дополнительным издержкам.

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

Answer 4

Определить переменную и проверить ее условно

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