Question

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

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

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

>> ...
>> click
>> move

DEMO： http://jsfiddle.net/gKqVt/

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

我在SO上看到了很多关于同一个问题的问题，但是没有（在我的搜索中）没有提供直截了当的想法，只能触发click事件。

Answer 1

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

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

Demo | Source

Answer 2

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

Chromium Issue 161464

如果您专门针对Chrome浏览器，那么可能需要比较事件时间戳来绕过它（使用@ExplosionPills建议的最小增量时间。但如果您正在寻找一般行为，那么您似乎会感觉更好将它们视为单独的事件，因为在每个浏览器中只有chrome（也许是Safari？这个bug被标记为webkit-core），它们实际上将是单独的事件。

Answer 3

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

点击动作可能会略微移动鼠标，但可能不是这样。可能只是一个浏览器怪癖。由于stopImmediatePropagation中的click不会阻止mousemove触发，因此这些事件似乎不是同一事件。如果您关注元素并按下键盘按钮，它实际上会触发click和仅 click。

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

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

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

但这非常具体。你应该考虑不要在mousemove上立即发生这种行为，因为它频繁发生。

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

当我尝试它时，我注意到一个简单的点击使得＃34; isDragging＆＃34;等于3但不经常

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

6 个答案: