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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

5 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

5 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前