javascript - 如何向 mousemove 事件添加一些缓冲区，以便它不会中断 mouseup 事件

Question

我目前正在构建一个可拖动的菜单，并且我在每个单独的选项卡上使用以下内容:

(mousedown)="dragging = false"
(mousemove)="checkMouseMove($event)"
(mouseup)="changeRoute('forms')"

更改路线如下所示:

 changeRoute(routeName: string) {

    // manual reset for dragging.
    if (this.dragging) {
        return;
    }

过去这只是我的路由和 switch 语句，它们会正确地更改路由并应用样式等。

之前在 mousemove 事件中，我刚刚设置了 dragging = true 但这样做的问题是，即使是最轻微的移动也意味着可能不会发生点击旨在。

我的第一直觉是我需要添加一个缓冲区，以将其移动所需的空间量称为拖动，但考虑到输出事件，我不确定如何实现这一点。

checkMouseMove(event) {
    console.log(event);
}

此事件为我提供了以下输出:

如何将这些事件与我的 checkMouseMove/组件结合使用，以便仅在合理的移动量后更改拖动？

Answer 1

您可以保存上次鼠标位置并计算光标移动的距离。根据这个距离，您可以过滤掉小的和不需要的阻力。

var lastEvent;
function checkMouseMove (event){
    var dx = 0;
    var dy = 0;
    if (lastEvent) {
        dx = event.clientX - lastEvent.clientX;
        dy = event.clientY - lastEvent.clientY;
    }
    var d = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
    if (d > 5) { /* handle mouse move here */ }
    lastEvent = event;
}

您还可以使用任何其他非欧几里得启发式算法，例如曼哈顿或切比雪夫。