如何确定 onmousemove 事件的方向？

Posted 2023-02-16

【中文标题】如何确定 onmousemove 事件的方向？

【英文标题】：How to determine the direction on onmousemove event?

【发布时间】：2012-02-21 06:52:48

【问题描述】：

例如，在某些情况下，我想在鼠标按下时取消 onmousemove 事件。是否可以确定onmousemove 事件的方向？ jQ或者JS都可以。

我有拖放元素。用户向上拖动元素。例如，如果元素的底部到达文档中的某个位置（即从文档顶部到500px），onmousemove 就会停止。如果用户尝试再次向上拖动元素，该功能将不会启动。此元素只能向下拖动。所以我认为通过捕捉mousemove 事件的方向很容易做到这一点。但是好像没有这样的标准属性。

【问题讨论】：

What have you tried so far??

还没有。我虽然可能有一些鼠标事件的属性，我在 W3C 规范和 jQ 文档中找不到我自己。如果为此目的没有什么特别之处，我会尝试以不同的方式解决任务。但奇怪的是，它可能是非常有用的标准属性。

【参考方案1】：

event.movementX 是与前一个 positionX 的 px 差异，例如100 代表向右移动 100 像素，-100 代表向左移动等，0 代表没有移动。

【参考方案2】：

有一些标准属性可以显示与之前的鼠标移动事件相关的增量：

document.addEventListener('mousemove', function (event) 
  directionX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
  directionY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
);

就像documentation中所说的：

MouseEvent.movementX 只读属性提供鼠标指针 X 坐标在该事件和前一个 mousemove 事件之间的偏移。

【讨论】：

这很好，但支持列表很小！

【参考方案3】：

您可以保存最后一个mousemove 事件的位置以与当前位置进行比较：

//setup a variable to store our last position
var last_position = ,
$output       = $('#output');

//note that `.on()` is new in jQuery 1.7 and is the same as `.bind()` in this case
$(document).on('mousemove', function (event) 

    //check to make sure there is data to compare against
    if (typeof(last_position.x) != 'undefined') 

        //get the change from last position to this position
        var deltaX = last_position.x - event.clientX,
            deltaY = last_position.y - event.clientY;

        //check which direction had the highest amplitude and then figure out direction by checking if the value is greater or less than zero
        if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) 
            //left
         else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) 
            //right
         else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 0) 
            //up
         else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) 
            //down
        
    

    //set the new last position to the current for next time
    last_position = 
        x : event.clientX,
        y : event.clientY
    ;
);

这是一个演示：http://jsfiddle.net/Dv29e/

更新

您还可以限制mousemove 事件以更全面地了解鼠标移动到的位置：

var last_position = ,
    $output       = $('#output'),
    mousemove_ok  = true,
    mouse_timer   = setInterval(function () 
        mousemove_ok = true;
    , 500);
$(document).on('mousemove', function (event) 
    if (mousemove_ok) 
        mousemove_ok = false;
        ...
    
);

这只会在以下情况下检查光标的位置与过去的位置：

最后一个位置存在。 mousemove_ok 变量设置为 true，每半秒执行一次。

这是一个节流演示：http://jsfiddle.net/Dv29e/4/

【讨论】：

您需要考虑滚动。

感谢指正，clientX 和clientY 可能更合适。