如果“mousemove”和“click”事件同时发生，该怎么办？

我不知道它是否只是Chrome问题（现在无法检查），但让我们尝试下面的一段代码，我们将两个事件绑定到某个元素：

$("div").on({ mousemove: function(e) { console.log("move"); }, click: function(e) { console.log("click"); } }); 

如果我们尝试单击该元素，我们会发现由于某种原因mousemove事件在单击后立即触发，因此在控制台中我们有：

 >> ... >> click >> move 

演示： http ： //jsfiddle.net/gKqVt/

请注意， mousedown和mouseup事件的工作方式相同。

我在SO上看到了很多关于同一个问题的问题，但没有（在我的搜索中）没有给出直接的想法，只为了触发click事件该怎么做。

Answer 1

这种行为是奇怪的，它似乎并不普遍发生（在Chrome / IE中发生，对我而言，但不是FFX）。 我认为你没有得到一个正确的答案，因为没有一个真的。

点击动作可能会略微移动鼠标，但这可能不是它。 可能只是一个浏览器怪癖。 这些甚至看起来都不是同一个事件，因为click中的stopImmediatePropagation不会阻止mousemove被触发。 如果您关注元素并按下键盘按钮，它实际上会触发click并且只能 click 。

由于这是如此古怪，似乎处理它的唯一方法是时代。 尽管如此，我注意到在click 之前 click发生了一毫秒，因此您可以通过比较点击时间戳+2（或10）来结束：

 mousemove: function(e) { if ($(this).data('lastClick') + 10 < e.timeStamp) { 

http://jsfiddle.net/gKqVt/3/

不过，这是非常具体的。 您应该考虑不要立即在mousemove上发生的行为，因为它太频繁了。

Answer 2

鼠标移动似乎与Chrome中的每个鼠标操作绑定，因此每次鼠标“移动”时都存储鼠标位置，并将其与前一个鼠标位置进行对齐，以validation它确实“已移动”。

 var currentPos=[]; $("div").on({ mousemove: function(e) { if (e.pageX!==currentPos[0] && e.pageY !==currentPos[1]){ currentPos=[e.pageX,e.pageY]; this.innerHTML = "Event: " + e.type; console.log("move"); } }, click: function(e) { this.innerHTML = "Event: " + e.type; console.log("click"); } }); 

演示 | 资源

Answer 3

这似乎是Chrome中的一个错误，它在11月份首次报道，并且仍处于打开状态。

Chromium Issue 161464

如果您专门针对Chrome浏览器，则可能需要比较事件时间戳来绕过它（使用@ExplosionPills建议的最小增量时间。但如果您正在寻找一般行为，那么您最好将它们视为单独的事件，因为在每个浏览器，但铬（也许Safari？错误被标记为webkit核心），他们实际上将是单独的事件。

Answer 4

为什么不检查鼠标是否真的像以下一样移动：

 function onMouseDown (e) { mouseDown = { x: e.clientX, y: e.clientY }; console.log("click"); } function onMouseMove (e) { //To check that did mouse really move or not if ( e.clientX !== mouseDown.x || e.clientY !== mouseDown.y) { console.log("move"); } } 

FIDDLE DEMO

（我认为它仍然适用于所有浏览器）

Answer 5

 var a,b,c,d; $(".prd img").on({ mousedown: function(e){ a= e.clientX, b= e.clientY; }, mouseup: function(e){ c= e.clientX, d= e.clientY; if(a==c&&b==d){ console.log('clicked'); } } }); 

Answer 6

我注意到这种行为，当我需要在mousedown和mouseup之间进行区分而不拖动两者之间以及mousedown和mouseup之间的拖动时，我使用的解决方案如下：

 var div = $('#clickablediv'); var mouseDown = false; var isDragging = 0; div.mousedown(function () { isDragging = false; mouseDown = true; }).mousemove(function () { if (mouseDown) isDragging++; }).mouseup(function () { mouseDown = false; var wasDragging = isDragging; isDragging = 0; if (!wasDragging || wasDragging<=1) { console.log('there was no dragging'); } }); 

当我尝试它时，我注意到一个简单的点击使得“isDragging”等于3但不是很频繁