代码之家 › 专栏 › 技术社区 › li x

如何向mousemove事件添加一些缓冲区,使其不会中断mouseup事件

ecmascript-6 angular javascript

0

li x · 技术社区 · 7 年前

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

更改路由如下所示:

 changeRoute(routeName: string) {

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

过去这只是我的路由和交换机语句,正确地将改变路由和应用样式等。

mousemove 我刚参加的活动 dragging = true 但问题是,即使是最轻微的移动,也意味着在可能发生的情况下不会发生单击。

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

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

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

如何将这些事件与checkMouseMove/Component结合使用,以便仅在经过合理的移动量后更改拖动?

1 回复 | 直到 7 年前

1

2

rafaelcastrocouto 6 年前

您可以保存最后一个鼠标位置并计算光标移动的距离。基于此距离,您可以过滤小的和不需要的阻力。

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;
}

您也可以使用任何其他非欧几里德启发式,如曼哈顿或切比雪夫。