我如何为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;
}

您还可以使用其他非欧几里得启发式算法，例如Manhattan或Chebyshev。