如果“鼠标移动"怎么办?和“点击"事件同时触发? [英] What to do if "mousemove" and "click" events fire simultaneously?
问题描述
我不知道是不是只有 Chrome 问题(现在无法检查),但是让我们尝试以下代码,我们将两个事件绑定到某个元素:
$("div").on({鼠标移动:功能(e){console.log("移动");},点击:功能(e){console.log("点击");}});
如果我们尝试点击元素,我们会发现由于某种原因 mousemove
事件在点击后立即触发,所以在控制台我们有:
<代码>>>...>>点击>>移动
演示: http://jsfiddle.net/gKqVt/>
请注意,mousedown
和 mouseup
事件在相同的场景下工作.
我在 SO 上看到了很多关于同一问题的问题,但没有一个(在我的搜索中)给出了如何触发 click
事件 only 的直接想法.
这种行为很奇怪,而且似乎并不普遍发生(对我来说在 Chrome/IE 中发生,但在 FFX 中没有发生).我想你还没有得到一个直接的答案,因为真的没有.
鼠标可能会因点击动作而轻微移动,但可能并非如此.可能只是浏览器的怪癖.这些甚至似乎不是同一个事件,因为 click
中的 stopImmediatePropagation
不会阻止 mousemove
触发.如果您聚焦元素并点击键盘按钮,它实际上会触发click
并且only click
.
既然这太古怪了,似乎唯一的办法就是时间.尽管这很麻烦,但我确实注意到 click
发生在 mousemove
之前一毫秒,因此您可以通过比较点击来接近时间戳 + 2(或 10):
mousemove: function(e) {if ($(this).data('lastClick') + 10 < e.timeStamp) {
不过,这是非常具体的.您应该考虑不要在 mousemove 上立即发生行为,因为它非常频繁.
I don't know whether it is only Chrome problem (can't check now), however let's try the following piece of code, where we bind two events to some element:
$("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 mousemove
event fires immediately after click, so in console we have:
>> ...
>> click
>> move
DEMO: http://jsfiddle.net/gKqVt/
Note, that mousedown
and mouseup
events work by the same scenario.
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 click
event only.
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.
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 stopImmediatePropagation
in click
doesn't stop mousemove
from firing. If you focus the element and hit a keyboard button, it will actually trigger click
and only 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 click
happens one millisecond before mousemove
, so you could get close by comparing the click timestamp + 2 (or 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.
这篇关于如果“鼠标移动"怎么办?和“点击"事件同时触发?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!