Javascript как различать guish между событиями mouseDown, click и doubleClick

Question

Я хотел бы иметь разные обработчики для событий mouseDown, single click и double внутри html svg. Теперь, когда я нажимаю svg, запускаются обработчики mouseDown и click, и аналогично, при двойном щелчке запускаются обработчики щелчка и двойного щелчка. Есть ли способ решить эту проблему? Спасибо

Обновление: я хотел бы использовать эти обработчики для фигур svg, в частности, mouseDown / Up для перетаскивания, один щелчок для изменения формы и двойной щелчок для удаления формы.

Answer 1

Событие

dblclick срабатывает после двух событий щелчка и после двух пар событий mousedown и mouseup.

Обычно мы видим такой случай, когда, например, выбираем / фокусируем файл одним щелкните, а затем запустите файл двойным щелчком. Нет ничего плохого в том, чтобы выбрать один и тот же файл несколько раз.

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

let clicks = 0;
let clickTimer = 0;
const dblClickTimeSpan = 300;

const clickHandler = (e) => {
    clicks++;
    if(clicks === 1) {
    clickTimer = setTimeout(()=>{
        clicks = 0;
        // handle single click, now we are sure it is not a bouble click
        console.log('Single Click.')
    }, dblClickTimeSpan);
    }
    if(clicks === 2) {
        // it is the second click in double-click event
        clearTimeout(clickTimer);
        clicks = 0;
    }
}

myButton.addEventListener('click', clickHandler);
myButton.addEventListener('dblclick', (e) => console.log('Double Click.'));

<button id="myButton">Button</button>

Answer 2

Двойной щелчок (очевидно) состоит из двух одиночных щелчков. Когда выполняется первый щелчок, никто не знает, будет ли второй щелчок или нет. Вот почему первый щелчок двойного щелчка вызывает «событие одиночного щелчка». Поэтому нет способа решить эту проблему.

Рекомендуемое решение - не использовать оба события (одиночный и двойной щелчок) в одном элементе управления.

Answer 3

вы можете использовать event.detail для обнаружения простого или двойного щелчка (возможно, тройного щелчка)

function fClicksd( elmId, fctSimpleClick, fctDoubleClick )
  {
  const clickDelay = 600 // a large one...  
    ,   clickElm   = document.getElementById(elmId)
  let  timOutRef   = setTimeout(() => { }, 0)

  clickElm.onclick=e=>
    {
    switch (e.detail) {
      case 1:
        clearTimeout(timOutRef)
        timOutRef = setTimeout( fctSimpleClick , clickDelay, e)        
        break;
      case 2:
        clearTimeout(timOutRef)
        fctDoubleClick(e)        
        break;
      }
    }
  }


var cpt= 0

function f_onSVGsimpleClick()  { console.log( ' SVG simple click', cpt++ ) }
function f_onSVGdoubleClick()  { console.log( ' SVG double click', cpt++ ) }
function f_onParagrphSimpleClick(e)
  {
  if (!e.target.matches('span')) return
  console.log( e.target.textContent + ' simple click', cpt++ )
  }
function f_onParagrphDoubleClick(e)
  {
  if (!e.target.matches('span')) return
  console.log( e.target.textContent + ' double click', cpt++ )
  }

fClicksd( 'my-rect', f_onSVGsimpleClick, f_onSVGdoubleClick  )
fClicksd( 'my-paragraph', f_onParagrphSimpleClick, f_onParagrphDoubleClick  )

#my-paragraph, rect { cursor: pointer;}
#my-paragraph span:hover { background-color:yellow }

<p id="my-paragraph">
  <span>Paul</span>
  <span>John</span>
</p>

<svg width="150" height="100" viewBox="0 0 3 2">
  <rect id="my-rect" width="1" height="2" x="2" fill="#d2232c" />
</svg>

Answer 4

Вы можете создать метод щелчка и с помощью тайм-аута различать, происходит ли событие одиночного или двойного щелчка. а в тайм-ауте установите разницу в 1 или 2 секунды.