使用IE双击 [英] double click using IE
问题描述
我在IE中发现了双击问题.
I have discovered a double-click problem in IE.
以下是我的HTML:
<div id="test">Hello World!</div>
还有我的jQuery:
And my jQuery:
$('#test').bind('dblclick', function (event) {
event.stopPropagation();
$(this).css({'background-color': 'red'});
});
在IE中,请执行以下操作:
In IE, do the following:
- 在DIV之外,鼠标向下→鼠标向上→鼠标向下→保持鼠标向下.
- 然后,在按住鼠标的同时,将鼠标移到DIV中并向上移动鼠标.
- Outside the DIV, mouse down → mouse up → mouse down → HOLD the mouse down.
- Then, with the mouse held down, move the mouse into the DIV and mouse up.
DIV变为红色,就像双击事件起源于DIV.
The DIV turns red, as if the double-click event originated in the DIV.
似乎在IE中,双击时都会触发双击事件:
It seems that in IE the double-click event is fired both when the double-click:
- DIV中的开始和结束
- 在DIV外部开始,在DIV内部结束.
但是在FF/Chrome中,只有双击DIV中的STARTS和ENDS才会触发该事件.
Yet in FF/Chrome the event is fired only when the double click STARTS and ENDS inside the DIV.
对此的官方解释是什么?以及如何使IE双击的行为类似于FF/Chrome双击?
What is the official explanation for this? And how can I make IE double-clicks behave like FF/Chrome double-clicks?
推荐答案
(on)dblclick事件是本地javascript事件,而不是jquery事件
Dblclick事件在各浏览器中不一致,请参阅此票证已使用3年了,但仍在某种程度上有效: http ://bugs.jquery.com/ticket/7876 甚至现在IE10中的顺序与FF/Chrome/Safari相同,但正如您所指出的那样,仍然存在一些错误.
Dblclick event is not consistent across browsers, see this ticket 3 years old but still valid in some way: http://bugs.jquery.com/ticket/7876 even now sequence in IE10 is the same as FF/Chrome/Safari but as you noted it, there are still some bugs.
作为解决方法,您可以使用以下代码段代替dblclick事件:
As a workaround, you could use this snippet instead of dblclick event:
$('#test').on('click', function(event){
var t = this;
if (!t.clicks) t.clicks = 0;
++t.clicks;
if (t.clicks === 2) {
t.clicks = 0;
//here the kind of dclclick is fired ...
$(t).css({'background-color' : "red"});
}
setTimeout(function () {
t.clicks = 0
}, 500);//duration value can be change depending of your wishes
});
另一种解决方法可能是在mousedown/mouseenter/mouseleave(悬停)处理程序上绑定/解除绑定dblclick事件,例如:
An other workaround could be to bind/unbind dblclick event on mousedown/mouseenter/mouseleave (hover) handlers, like that:
DEMO,具有mousedown/mouseenter/mouseleave
$('#test').hover(function () {
$(this).on('mousedown.cust', function () {
$(this).on('dblclick.cust', function () {
$(this).css({
'background-color': "red"
});
});
});
}, function () {
$(this).off('mousedown.cust dblclick.cust');
});
这篇关于使用IE双击的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!