Как определить направление события onmousemove?

при некоторых условиях я хочу отменить onmousemove событие, когда мышь идет вниз, например. Можно ли определить направление onmousemove событие? jQ или JS в порядке.

у меня перетаскиванием элементов. Пользователь перетаскивает elenment вверх. Если, например, нижняя часть элемента достигает некоторого положения в документе (т. е. 500px сверху документа)onmousemove останавливается. И если пользователь попытается снова перетащить элемент вверх, функция не запустится. Только перетащите вниз будет возможным для этого элемента. Поэтому я подумал, что это будет довольно легко сделать, поймав направление mousemove событие. Но, похоже, таких стандартных свойств не существует.

9
javascript jquery mouseevent onmousemove

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;
        ...
    }
});

это будет проверять только позицию курсора против его прошлой позиции, если:

  1. последняя позиция существует.
  2. the mousemove_ok переменная имеет значение true что делается каждые полсекунды.

вот дроссельная демонстрация:http://jsfiddle.net/Dv29e/4/

22

существуют стандартные свойства, которые показывают дельты, относящиеся к предыдущему событию перемещения мыши:

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

Как говорится в документация:

MouseEvent.свойство movementX только для чтения обеспечивает сдвиг в координате X указателя мыши между этим событием и предыдущим событием mousemove.

7

событие.movementX-это разница в px от предыдущего positionX, например 100 для правого движения 100 px, -100 для левого движения и т. д., 0 для отсутствия движения.

0