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

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

ecmascript-6 angular javascript

li x · 技术社区 · 6 年前

(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 回复 | 直到 6 年前

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

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

推荐文章

Udders · 使用另一个数组中的值按索引从数组中删除

2 年前

Matt · 获取数组长度并推入每个对象

2 年前

Rahmouni Rabii · 尝试访问数组中的对象时未定义

2 年前

Brian Patterson · Javascript自定义数组。原型方法日志“未定义”

2 年前

dapidmini · 未捕获的承诺嵌套异步函数承诺错误处理

2 年前

Arka Bhattacharjee · 如何在JavaScript中反转大写的字符串?[重复]

2 年前

Zeeps Wear · 如何按键对对象进行分组?

2 年前

Kevin Giraldo · 如何更改字符串或数字在JavaScript中转换类的方式?

2 年前

Rachel · 如何按ID从JSON对象数组中删除数组元素

2 年前

minsu123 · 如何解析react中的单个引用?

2 年前