前往顾页
以后地位: 主页 > 收集编程 > Jsp实例教程 >

如安在Javascript中让单击Click和Double Click双击事件各自自力

时候:2017-10-30 21:04来源:知行网www.zhixing123.cn 编辑:麦田守望者

在Javascript中,如果对一个元素同时绑定Click和Double Click事件,在进行Double Click行动时,法度在呼应一个双击事件的同时,还会呼应两个单击事件。从道理下去讲这应当是精确的,但在开辟中常常需求对双击和单击做不合的措置(比如常见的单击选中,双击履行),单双击事件的稠浊呼应就带来了必然的搅扰。本次的目标就是让单击和双击事件各自自力不相互滋扰。

起首我们需求弄清楚,浏览器在进行单击和双击时,究竟向DOM元素通报了甚么,也就是说Javascript究竟靠甚么来辨别单击和双击。大白了道理,才好对症下药。

为了简朴申明,以JQuery为例,编写测试代码以下:

$("#test").click(function(e){
var res = '';
for(var i in e) {
res += i + ' : ' + e[i] + "\n";
}
alert(res);
});

来看看单击以后的成果

IE FF
originalEvent : [object]
undefined : undefined
which : undefined
wheelDelta : 0
view : undefined
type : click
toElement : null
timeStamp : 1229092321548
target : [object]
srcElement : [object]
shiftKey : false
screenY : 157
screenX : 140
relatedTarget : undefined
relatedNode : undefined
prevValue : undefined
pageY : 35
pageX : 138
originalTarget : undefined
newValue : undefined
metaKey : undefined
keyCode : 0
handler : function(e){}
fromElement : null
eventPhase : undefined
detail : undefined
data : undefined
currentTarget : undefined
ctrlKey : false
clientY : 37
clientX : 140
charCode : undefined
cancelable : undefined
button : 0
bubbles : undefined
attrName : undefined
attrChange : undefined
jQuery1229092320454 : true
preventDefault : function(){if(d.preventDefault)d.preventDefault();d.returnValue=false}
stopPropagation : function(){if(d.stopPropagation)d.stopPropagation();d.cancelBubble=true}

originalEvent : [object MouseEvent]
undefined : undefined
which : 1
wheelDelta : undefined
view : [object Window]
type : click
toElement : undefined
timeStamp : 11258562
target : [object HTMLDivElement]
srcElement : undefined
shiftKey : false
screenY : 154
screenX : 124
relatedTarget : null
relatedNode : undefined
prevValue : undefined
pageY : 46
pageX : 124
originalTarget : [object HTMLDivElement]
newValue : undefined
metaKey : false
keyCode : undefined
handler : function (e) {}
fromElement : undefined
eventPhase : 2
detail : 1
data : undefined
currentTarget : [object HTMLDivElement]
ctrlKey : false
clientY : 46
clientX : 124
charCode : undefined
cancelable : true
button : 0
bubbles : true
attrName : undefined
attrChange : undefined
jQuery1229092311220 : true
preventDefault : function () {if (d.preventDefault) {d.preventDefault();}d.returnValue = false;}
stopPropagation : function () {if (d.stopPropagation) {d.stopPropagation();}d.cancelBubble = true;}

 


将测试代码事件改成dblclick以后可以很简朴的获得双击的成果

IE FF
originalEvent : [object]
undefined : undefined
which : undefined
wheelDelta : 0
view : undefined
type : dblclick
toElement : null
timeStamp : 1229094138735
target : [object]
srcElement : [object]
shiftKey : false
screenY : 173
screenX : 126
relatedTarget : undefined
relatedNode : undefined
prevValue : undefined
pageY : 51
pageX : 124
originalTarget : undefined
newValue : undefined
metaKey : undefined
keyCode : 0
handler : function(e){}
fromElement : null
eventPhase : undefined
detail : undefined
data : undefined
currentTarget : undefined
ctrlKey : false
clientY : 53
clientX : 126
charCode : undefined
cancelable : undefined
button : 0
bubbles : undefined
attrName : undefined
attrChange : undefined
jQuery1229094137079 : true
preventDefault : function(){if(d.preventDefault)d.preventDefault();d.returnValue=false}
stopPropagation : function(){if(d.stopPropagation)d.stopPropagation();d.cancelBubble=true}

originalEvent : [object MouseEvent]
undefined : undefined
which : 1
wheelDelta : undefined
view : [object Window]
type : dblclick
toElement : undefined
timeStamp : 1229094216813
target : [object HTMLDivElement]
srcElement : undefined
shiftKey : false
screenY : 141
screenX : 137
relatedTarget : null
relatedNode : undefined
prevValue : undefined
pageY : 33
pageX : 137
originalTarget : [object HTMLDivElement]
newValue : undefined
metaKey : false
keyCode : undefined
handler : function (e) {}
fromElement : undefined
eventPhase : 2
detail : 2
data : undefined
currentTarget : [object HTMLDivElement]
ctrlKey : false
clientY : 33
clientX : 137
charCode : undefined
cancelable : true
button : 0
bubbles : true
attrName : undefined
attrChange : undefined
jQuery1229094214813 : true
preventDefault:function(){if(d.preventDefault){d.preventDefault();}d.returnValue=false;}
stopPropagation:function(){if(d.stopPropagation){d.stopPropagation();}d.cancelBubble=true;}

 


需求重视的是type和detail这两项,type标识表记标帜了事件的范例,detail则是Firefox独占的属性,对单击进行了计数,双击时第一次为1,第二次为2。

便是说在FF中,还是有体例辨别两次单击行动的,但不管单击双击,detail都先从1开端计数,所以想处置务自带的属性其实不克不及到达自力事件的目标。

这里有一篇关于单双击问题的处理,供应了一种思路,简朴说是将第一次单击延时履行,如果在延时期间呈现第二次单击,则打消第一次单击的履行。

遵循上述体例我们可以摹拟出近似结果,可以参看DEMO,除单击时有延时以外,根基实现了事件的自力。

为了便利,做成JQuery插件,有兴趣的同窗可以自取所需。

顶一下
(1)
100%
踩一下
(0)
0%
------分开线----------------------------
标签(Tag):Javascript
------分开线----------------------------
颁发评论
请自发遵循互联网相关的政策法规,严禁公布色情、暴力、革命的谈吐。
评价:
神色:
考证码:点击我更换图片
猜你感兴趣