24

我不知道这是否只是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什么。

4

6 回答 6

9

Mousemove 似乎绑定到 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");
    }
});

演示| 资源

于 2013-01-26T16:35:00.443 回答
7

这似乎是 Chrome 中的一个错误，早在 11 月就首次报告，并且仍然存在。

铬问题 161464

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

于 2013-01-26T16:27:36.713 回答
3

这种行为很奇怪，而且似乎并不普遍发生（对我来说发生在 Chrome/IE 中，但不是 FFX）。我想你还没有得到一个直接的答案，因为真的没有。

单击操作可能会稍微移动鼠标，但可能不是这样。可能只是浏览器的怪癖。这些甚至看起来都不是同一个事件，因为stopImmediatePropagationinclick不会停止mousemove触发。如果你聚焦元素并按下键盘按钮，它实际上会触发click并且只有 click.

既然这太离奇了，似乎唯一的办法就是时间。尽管这很麻烦，但我确实注意到这click发生在 1 毫秒之前 mousemove，因此您可以通过比较点击时间戳 + 2（或 10）来接近：

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

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

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

于 2013-01-26T16:23:43.730 回答
3

为什么不只检查鼠标是否真的移动了，如下所示：

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

小提琴演示

（我认为它在所有浏览器中仍然是正确的）

于 2015-07-05T03:24:56.200 回答
0

当我需要区分 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');
       }
   });

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

于 2016-11-27T12:51:26.277 回答
0 

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

尝试这个。这一项工作正确。

于 2016-08-04T09:38:56.360 回答