js отличаются щелчком и двойным щелчком

Question

Я пытаюсь различить clickи события с помощью javascript. Я старался stopPropagation в dblclickоднако не сработало. поэтому я закодировал свою собственную функцию, используя setTimeout пытается не звонить другому при звонке одному.

      /* dblclick differ click 
takes two functions as param and one element 
to bind the event listener on
*/
function cdblclick(click, dblclick, el){
  el.cooled = true;
  el.addEventListener('click', function(){
    if(el.cooled){
      setTimeout(function(){
        if(!el.cdblc){el.cdblc = 0}
        el.cdblc++;
        if(el.cdblc === 1){
          setTimeout(function(){
            if(!el.doubled){
              console.log('click')
              // click();
              el.cdblc = 0;
              el.cooled = true;
              el.doubled = false;
            }
          }, 300);
        }else if(el.cdblc === 2){
          console.log('double')
          // dblclick();
          el.doubled = true;
          el.cdblc = 0;
          el.cooled = true;
        }else{
        }
      }, 250);
    }
  });
}

однако он не работает должным образом. Я буду так рад, если вы мне поможете.

Answer 1

Если вы вообще не хотите выполнять одиночный щелчок в случае двойного, вы можете использовать тайм-аут, как и вы. Вам просто нужно правильно сбросить счетчик и тайм-аут. Вы не сбрасываете el.cdblc на вашем последнем пустом else.

Имейте в виду, что это приводит к задержке обычных щелчков.

Answer 2

Вот решение, в котором каждый «счетчик кликов» специфичен для каждого элемента, поэтому onclick функции вне элемента не будут выполняться ...

Answer 3

Вроде это сработает.

      function cDblClick(click, dblClick, el) {
  let clickedTimes = 0;
  const incrementClick = () => {
    clickedTimes++;
  };
  const reset = () => {
    clickedTimes = 0;
  };

  el.addEventListener('click', () => {
    incrementClick();

    setTimeout(() => {
      if (clickedTimes === 1) {
        click();
      } else if (clickedTimes === 2) {
        dblClick();
      }

      reset();
    }, 300);
  });
}

Answer 4

Вы можете попробовать этот способ отличить click и dbclick:

Answer 5

вы можете попробовать ondblclick js listner следующим образом: