Javascript 如何确定 onmousemove 事件的方向？

How to determine the direction on onmousemove event?

提问by Green

On some condition I want to cancel onmousemoveevent when mouse goes down, for example. Is it possible to determine the direction of onmousemoveevent? jQ or JS is Ok.

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

I have drag'n'drop elements. The user drags the elenment up. If, for example, the bottom of the element reaches some position in the document (i.e. 500pxfrom the top of the document) the onmousemovestops. And if the user will try to drag the element up again the function will not start. Only drag down will be possible for this element. So I thought it would be quite easy to do it by catching the direction of the mousemoveevent. But it seems there's no such kind of standard properties.

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

回答by Jasper

You can save the position of the last mousemoveevent to compare to the current position:

您可以保存最后一个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
    };
});

Here is a demo: http://jsfiddle.net/Dv29e/

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

Update

更新

You can also throttle the mousemoveevent to get more of a general idea where the mouse has moved:

您还可以限制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;
        ...
    }
});

This will only check the cursor's position against it's past position if:

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

1. the last position exists.
2. the mousemove_okvariable is set to truewhich is done every half second.

1. 最后一个位置存在。
2. 该mousemove_ok变量被设置为true它做每半秒。

Here is a throttled demo: http://jsfiddle.net/Dv29e/4/

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

回答by mirik

There are standard properties that show deltas relevant to previous mouse move event:

有标准属性显示与先前鼠标移动事件相关的增量：

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

Like said in the documentation:

就像文档中所说：

The MouseEvent.movementX read-only property provides the shift in the X coordinate of the mouse pointer between that event and the previous mousemove event.

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

回答by jimver04

event.movementX is the difference in px from the previous positionX, e.g. 100 for right movement of 100 px, -100 for left movement etc, 0 for no movement.

event.movementX 是与前一个 positionX 的 px 差，例如 100 表示向右移动 100 px，-100 表示向左移动等，0 表示不移动。