如何在HTML画布中实现单击事件和拖动事件

我已经使用html画布创建了一个业务工具

它包含许多可以拖放的元素。我自己编写了这个功能，基本上说（伪代码）：

现在，我希望其中一些图标也能实现onClick事件，使它们既可以单击，也可以“拖放”

问题是，

mousedown

事件会在我按下鼠标按钮时立即触发（显然）。我想我可以使用一个短定时器，当

mousedown

触发并且

mouseInBoundsOfIcon==true

时，我可以启动它，当它达到0.5秒时，例如

icon.happed=true

，否则如果按钮被释放，它就算作点击

---

我不知道该怎么办。有什么建议吗？

至少有两种区分单击和拖动启动的常用方法。

这两种方法都涉及在mousedown期间进行测量，并将其与在mouseup或mousemove中进行的另一测量进行比较

• 测量鼠标移动的距离。例如，如果它在鼠标移动前移动超过5个像素，则是拖动

• 测量mousedown和mouseup之间的时间。例如，如果mouseup发生在mousedown的200ms范围内，那么它就是一次单击

---

有用提示：让鼠标向下默认设置为

拖动开始

，而不是

单击

。开始拖动鼠标向下移动。如果您稍后确定用户想要单击，则将图标放回其起始位置，以便在打算单击时不会有轻微的图标移动。

看起来这可能有用吗？

if(mouseIsDown && mouseInBoundsOfIcon){
    icon.grabbed = true;
}

if(icon.grabbed){
    icon.x = mouseX;
    icon.y = mouseY;
}