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

Question

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

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

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

540 3

jQuery javascript mouseevent onmousemove

3 ответов:

Comments

Ничего не найдено.

Jasper · Accepted Answer · 2012-01-28 21:06:10

Вы можете сохранить позицию последнего события 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/

mirik · Accepted Answer · 2017-03-01 17:51:55

Существуют стандартные свойства, которые показывают дельты, относящиеся к предыдущему событию перемещения мыши:
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.

jimver04 · Accepted Answer · 2017-08-29 10:08:45

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