代码之家 › 专栏 › 技术社区 › 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;
}

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

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前