javascript 如果“mousemove”和“click”事件同时触发怎么办？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14538743/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What to do if "mousemove" and "click" events fire simultaneously?
提问by VisioN
I don't know whether it is only Chromeproblem (can't check now), however let's try the following piece of code, where we bind two events to some element:
我不知道这是否只是Chrome 的问题（现在无法检查），但是让我们尝试以下代码，我们将两个事件绑定到某个元素：
$("div").on({
mousemove: function(e) {
console.log("move");
},
click: function(e) {
console.log("click");
}
});
If we try to click the element, we'll find that for some reason mousemoveevent fires immediately after click, so in console we have:
如果我们尝试单击该元素，我们会发现由于某种原因，mousemove事件在单击后立即触发，因此在控制台中我们有：
>> ...
>> click
>> move
DEMO:http://jsfiddle.net/gKqVt/
演示：http : //jsfiddle.net/gKqVt/
Note, that mousedownand mouseupevents work by the same scenario.
请注意，这mousedown和mouseup事件在相同的场景下工作。
I saw many questions on SO about the same problem, but none (in my search) gave the straightforward idea what to do in order to fire the clickevent only.
我在 SO 上看到了很多关于同一问题的问题，但没有一个（在我的搜索中）给出了简单的想法，以便仅触发click事件。
采纳答案by Explosion Pills
This behavior is odd, and it doesn't seem to occur universally (happens in Chrome/IE for me, but not FFX). I think you haven't gotten a straight answer because there isn't one really.
这种行为很奇怪，而且似乎并不普遍发生（对我来说在 Chrome/IE 中发生，但在 FFX 中不发生）。我想你还没有得到一个直接的答案，因为真的没有。
It's possible that the mouse is moved very slightly by the click action, but that's probably not it. Could just be a browser quirk. These don't even seem to be the same event since stopImmediatePropagationin clickdoesn't stop mousemovefrom firing. If you focus the element and hit a keyboard button, it will actually trigger clickand onlyclick.
鼠标可能会因点击动作而轻微移动，但事实并非如此。可能只是浏览器的怪癖。这些甚至似乎不是同一个事件，因为stopImmediatePropagationinclick不会停止mousemove射击。如果您聚焦元素并按下键盘按钮，它实际上会触发click并且仅click.
Since this is so quirky, it seems like the only way to deal with it is times. As much of a kludge as this is, I do notice that clickhappens one millisecond beforemousemove, so you could get close by comparing the click timestamp + 2 (or 10):
由于这太古怪了，似乎处理它的唯一方法是时间。尽管如此混乱，我确实注意到click发生在 之前一毫秒mousemove，因此您可以通过比较点击时间戳 + 2（或 10）来接近：
mousemove: function(e) {
if ($(this).data('lastClick') + 10 < e.timeStamp) {
This is very specific, though. You should consider not having behavior that occurs immediately on mousemove since it's so frequent.
不过，这是非常具体的。您应该考虑不要在 mousemove 上立即发生行为，因为它是如此频繁。
回答by extramaster
Mousemove appears to be binded to every mouse action there is in Chrome, so store the mouse position every time the mouse "moves" and check it against the previous mouse position to validate that it has indeed "moved"..
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");
}
});
回答by Ben McCormick
This appears to be a bug in Chrome that was first reported back in November, and remains open.
这似乎是 Chrome 中的一个错误，该错误于 11 月首次报告，并且一直处于打开状态。
If you are targeting Chrome specifically then it may be worth comparing the event timestamps to get around it (using some minimum delta time as @ExplosionPills suggested. But if you're looking for general behavior it seems that you're better off treating them as separate events, because in every browser but chrome (and maybe Safari? the bug is labeled as webkit-core) they will in fact be separate events.
如果您专门针对 Chrome，那么可能值得比较事件时间戳来解决它（使用@ExplosionPills 建议的一些最小增量时间。但如果您正在寻找一般行为，似乎最好将它们视为单独的事件，因为在每个浏览器中，除了 chrome（可能还有 Safari？该错误被标记为 webkit-core），它们实际上将是单独的事件。
回答by Ben Mack
Why don't just check that did the mouse really move or not like below:
为什么不直接检查鼠标是否真的移动了，如下所示：
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");
}
}
(I think it's will still correct in all browsers)
（我认为它在所有浏览器中仍然正确）
回答by Hanul Choi
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');
}
}
});Try this. This one work correct.
试试这个。这一项工作正确。
回答by AZNI HAMZA
I noticed this behavior when I needed to differenciate between mousedown and mouseup without dragging between the two and mousedown and mouseup with dragging between them, the solution that I used is as follows:
当我需要在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');
}
});
when I tried it, I noticed that periodacaly a simple click makes "isDragging" equal to 3 but not very frequently
当我尝试时，我注意到一个简单的点击使“isDragging”等于 3 但不是很频繁
