如何确定onmousemove事件的方向？

Question

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

我有拖放元素。用户将元素拖动向上移动。如果，例如，元素底部到达文档中的某个位置（即距离文档顶部500像素），则onmousemove停止。如果用户再次尝试将元素拖动向上，则该函数将不会启动。对于此元素，只能向下拖动。因此，我认为通过捕获mousemove事件的方向来实现这一点将非常容易。但是似乎没有这种标准属性。

- Green

---

你到目前为止尝试了什么？ - Fahim Parkar

目前还没有什么。我觉得可能有一些鼠标事件的属性，但是在W3C规范和jQ文档中找不到。如果没有特殊用途的话，我会尝试用其他方法解决这个问题。但奇怪的是，这可能是一个非常有用的标准属性。 - Green

Answer 1

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

仅当以下条件满足时，它才会检查鼠标指针的位置是否与其过去的位置相同：

1. 上次位置存在。
2. mousemove_ok 变量被设置为 true ，这是每半秒钟执行一次的。

这里有一个节流示例：http://jsfiddle.net/Dv29e/4/

- Jasper

---

你需要考虑滚动。 - Ed Heal

感谢您的纠正，clientX和clientY可能更加合适。 - Jasper

Answer 2

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

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

如文档所述：MouseEvent.movementX 是只读属性，提供了鼠标指针在当前事件和上一个mousemove事件之间在X坐标上的偏移量。

- mirik

---

这个很不错，但是支持的列表比较小！ - Nikola Lukic

Answer 3

event.movementX 是相对于前一个 positionX 的像素差，例如向右移动 100 像素为 100，向左移动为 -100，没有移动则为 0。

- Dimitrios Ververidis