JavaScript：从点击事件触发面积测量和线测量，答案

【问题标题】：JavaScript: Trigger area measurement and line measurement from click event,JavaScript：从点击事件触发面积测量和线测量，
【发布时间】：2017-12-24 09:17:10
【问题描述】：

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

线测量：这是通过两次点击触发的，第一次点击确定直线的第一个点，第二次点击确定直线的终点。
面积测量：一键触发如下：
一种。 mouseDown：确定区域的第一个点。
湾。 mouseMove：鼠标按下时选择区域。
C。 mouseUp：确定区域的终点。

我尝试通过不同的方式触发这两种方式，但最好的方式仍然存在一些问题。

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

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

定义这三个事件监听器。

Mouse Down：在此函数中，我存储 Date.now() 并最初设置面积测量值。除了 settimeout 300ms 后回调，我检查鼠标是否仍然向下，如果是，将模式设置为区域测量。
鼠标移动：绘制选中的模式。
Mouse Up：这里我检查 Date.now()，如果点击小于 300ms，则将模式转换为 line 并调用 MouseMove()。

但这种方法在前 300 毫秒内存在一些问题，它不明确用户想要哪种模式。使用我的方法，代码知道 300ms 之后的模式，但在 300ms 之前，它不知道。

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

【问题讨论】：

Event.on 应该是什么？？
它的 YUI 库，这样它定义了事件。
也许只是减少时间？正常点击更短
我尝试了很多时间值，但点击时间是从（100-650）毫秒，所以我取了它的平均值。但我想知道是否有另一种方法可以有效地触发它们。
也许只是检测到鼠标移动？如果单击它不应该移动。

标签： javascript events

【解决方案1】：

看看这个答案，它显示了如何区分点击和拖动。 How to distinguish mouse "click" and "drag"

看起来完全是 2 个不同的东西，不应该依赖于用户移动的速度。

点击，点击 = 测量距离

MouseDown、Drag、MouseUp = 测量区域

【讨论】：