Question

我需要一个能够确定用户是否点击，双击或拖动鼠标的功能。

因为使用普通事件在同一个画布上发生的一切都行不通。我通过谷歌找到了这个：

不建议将处理程序绑定到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

这样的事情。未经测试，我现在想不出一些奇怪的原因。

Javascript，单击，双击并拖动相同的元素

2 个答案: