Как определить, перемещена ли мышь во время .click()?

Question

Согласно документации JQuery для .click(), событие срабатывает только после этой серии событий:

• кнопка мыши нажата, когда курсор находится внутри элемента.
• Кнопка мыши отпускается, когда указатель находится внутри элемента.

Проблема, с которой я сталкиваюсь, заключается в том, что я использую функцию «щелкнуть мышью» для сетки элементов, каждая из которых я хочу зарегистрировать событие click. Это означает, что каждый раз, когда я нажимаю, чтобы перетащить, мышь нажимается на элемент, а затем отпускается на том же элементе после перетаскивания. Это вызывает событие click.

Есть ли способ только запустить событие, если мышь не перемещалась между тем, когда мышь была нажата до того, как мышь была выпущена? Хотя это кажется тривиальным, как начинающий jQuery, я как бы зациклен.

Answer 1

Следите за положением мыши между mousedown и mouseup, чтобы увидеть, что указатель мыши перемещен. Вы, вероятно, следует добавить немного погрешность, как несколько пикселей каждый путь, но ниже упрощенный пример:

var left = 0, 
    top = 0;  

$(element).on({ 
    mousedown: function(e) { 
     left = e.pageX; 
     top = e.pageY; 
    }, 
    mouseup: function(e) { 
     if (left != e.pageX || top != e.pageY) { 
      alert(' OMG, it moved ! '); 
     } 
    } 
}); 

Answer 2

Вы рассмотрим MouseDown и инициирующее событие MouseUp быть жизнеспособной альтернативой? Если координаты мышки совпадают с координатами для мыши, курсор не изменил позицию во время щелчка.

Answer 3

Нет, такого события не будет, поскольку это будет почти совершенно бесполезно. Очень часто, когда мышь слегка двигается, даже если пользователь не намеревался этого, особенно с обычной мышью, где кнопка для щелчка находится на самой мыши.

Получите координаты мыши в событиях mousedown и mouseup и действуйте на событие mouseup в зависимости от того, как далеко перемещена мышь.

Answer 4

Я немного изменил код @ adeneo, поэтому он заботится о проблеме, когда пользователь перемещает курсор «немного», и на самом деле его следует интерпретировать как щелчок. Для этого я использовал эвклидовую дистанцию. Вы можете сбросить Math.sqrt за лучшую производительность, но тогда вам нужно настроить переменную radiusLimit.

var left = 0, 
    top = 0, 
    radiusLimit = 5; 

$(element).on({ 
    mousedown: function(event) { 
    left = event.pageX; 
    top = event.pageY; 
    }, 
    mouseup: function(event) { 
    var deltaX = event.pageX - left; 
    var deltaY = event.pageY - top; 
    var euclidean = Math.sqrt(deltaX * deltaX + deltaY * deltaY); 

    if (euclidean < radiusLimit) { 
     console.log("this is a click."); 
    } 
    } 
});