如何确定onmousemove事件的方向？ [英] How to determine the direction on onmousemove event?

问题描述

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

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

我有拖拽元素。用户拖动元素。例如，如果元素的底部到达文档中的某个位置（即从文档顶部 500px ） onmousemove 停止。如果用户将尝试再次向上拖动元素，则该功能将无法启动。只能向下拖动此元素。因此我认为通过捕获 mousemove 事件的方向来实现它会非常容易。但似乎没有这种标准属性。

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. 500px from the top of the document) the onmousemove stops. 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 mousemove event. But it seems there’s no such kind of standard properties.

推荐答案

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

You can save the position of the last mousemove event to compare to the current position:

//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 事件，以获得更多关于鼠标移动的一般概念：

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

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. 最后一个位置存在。


2. mousemove_ok 变量设置为 true 这是半秒钟完成的。

1. the last position exists.
2. the mousemove_ok variable is set to true which is done every half second.

这是一个受限制的演示：< a href =http://jsfiddle.net/Dv29e/4/ =noreferrer> http://jsfiddle.net/Dv29e/4/

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

这篇关于如何确定onmousemove事件的方向？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！