JavaScript：点击事件

Question

我有一个画布，在这个画布里面，我有图像和其他东西，除此之外，还有一个测量工具，用来测量画布内的smth长度。现在我需要测量工具以两种不同的模式运行：

1. 线路测量： 这是通过两次点击触发，第一次点击确定线的第一个点，第二次点击确定线的终点。
   
   
2. 面积测量：按一次点击触发，如下所示：
   一个。 mouseDown：确定区域的第一个点 湾mouseMove：鼠标停止时选择区域 C。 mouseUp：确定区域的终点。

我试图以不同的方式触发两者，但最好的方法仍有一些问题。

我的方法：^{使用YUI lib定义事件}

Event.on(canvas,"mousedown", mousedown);
Event.on(canvas,"mousemove", mousemove);
Event.on(canvas,"mouseup", mouseup);

定义这三个事件监听器。

• 鼠标按下：在此功能中，我存储Date.now（）并初步设置区域测量。除了300ms后的settimeout回拨，我检查鼠标是否仍然按下，如果是，则将模式设置为区域测量。

• 鼠标移动：绘制所选模式。

• 鼠标向上：这里我检查Date.now（），如果点击次数少于300ms，将模式转换为line并调用MouseMove（）。

  < / LI>

但是这种方法在前300ms中存在一些问题，其模糊的用户想要的模式。使用我的方法，代码在300ms后知道模式，但在300ms之前，它无法知道。

那么有助于改进这种方法或设置新方法吗？

Answer 1

看一下这个答案，该答案展示了如何区分点击和拖拽。 How to distinguish mouse "click" and "drag"

似乎总共有2个不同的东西，不应该依赖用户移动的速度。

  

单击，单击=测量距离

     

MouseDown，Drag，MouseUp =测量区域