Javascript, нажмите, дважды щелкните и перетащите в тот же элемент

Question

Мне нужна функция, которая определяет, щелкает ли пользователь, дважды щелкает мышью или перетаскивает его мышью.

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

Нецелесообразно привязывать обработчики к событиям click и dblclick для одного и того же элемента.Последовательность запускаемых событий варьируется от браузера к браузеру: одни получают два события щелчка, а другие только одно.Если нельзя избежать интерфейса, который по-разному реагирует на одиночные и двойные щелчки, то событие обработчика dblclick должно быть смоделировано в обработчике щелчков.Мы можем достичь этого, сохранив временную метку в обработчике, а затем сравнив текущее время с сохраненной временной меткой при последующих щелчках.Если разница достаточно мала, мы можем рассматривать щелчок как двойной щелчок.

Как мне добиться этого хорошим способом?

Сначала посмотрите, нажата ли кнопка (для перетаскивания)?Когда это выпущено, рассматривают это как щелчок?а затем, если снова нажать дважды?

Как я могу перевести это в код?Помощь оценена.

Answer 1

Что-то вроде следующего должно помочь вам начать, я использую jQuery просто для упрощения показа, это может быть реализовано с помощью прямого JS, это просто много шума

$(function() {

  var doubleClickThreshold = 50;  //ms
  var lastClick = 0;
  var isDragging = false;
  var isDoubleClick = false;

  $node = ("#mycanvas");
  $node.click(function(){
    var thisClick = new Date().getTime();
    var isDoubleClick = thisClick - lastClick < doubleClickThreshold;
    lastClick = thisClick;
  });

  $node.mousedown(function() {
    mouseIsDown = true;
  });

  $node.mouseUp(function() {
    isDragging = false;
    mouseIsDown = false;
  });

  // Using document so you can drag outside of the canvas, use $node
  // if you cannot drag outside of the canvas
  $(document).mousemove(function() {
     if (mouseIsDown) {
       isDragging = true;
     }
  });
});

Answer 2

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

time = 0
if(new Date().getTime() < time + 400) {
  // Double click
  throw new Error("Stop execution");
}
if(!!time)
  throw new Error("Stop execution");
time = new Date().getTime();
// Single click

Нечто подобное. Непроверенный, и я не могу думать сейчас по какой-то странной причине.