html - 如何在HTML Canvas中实现点击事件和拖动事件

Question

我已经使用 html canvas 创建了一个业务工具。

它包含许多可以拖放的元素。我自己编写了这个功能，基本上是这样说的(伪代码):

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

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

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

问题是 mousedown 事件在我按下鼠标按钮时立即触发(很明显)。我想我可以使用一个短计时器，当 mousedown 触发并且 mouseInBoundsOfIcon==true 时，我可以启动它，例如当它达到 0.5 秒时 icon .grabbed = true，否则如果按钮被释放就算作一次点击？

我不确定该怎么做。有什么建议吗？

Answer 1

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

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

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

• 测量 mousedown 和 mouseup 之间的时间。例如，如果 mouseup 发生在 mousedown 的 200 毫秒内，则为点击。

有用的提示:让 mousedown 默认为 drag-start 而不是 click。开始拖动 mousedown。如果您稍后确定用户想要点击，则将图标放回其起始位置，这样他们在想要点击时图标就不会轻微移动。