如果"mousemove"和"click"事件同时发生,该怎么办？

Question

我不知道它是否只是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中的每个鼠标操作绑定,因此每次鼠标"移动"时都存储鼠标位置,并将其与前一个鼠标位置进行对齐以验证它确实"移动"了..

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 2

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

Chromium Issue 161464

如果你的目标明确的Chrome那么它可能是值得比较事件时间戳避过它(使用一些最小增量时间为@ExplosionPills建议.但是,如果你正在寻找一般的行为似乎是你最好把他们当作单独的事件,因为在每个浏览器,但铬(也许Safari？错误被标记为webkit核心),他们实际上将是单独的事件.

Answer 3

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

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

由于这太奇怪了，似乎唯一的解决方法就是时间。尽管这是一个拼凑，但我确实注意到它发生在 之前click一毫秒，因此您可以通过比较点击时间戳 + 2（或 10）来接近： mousemove

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

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

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