在前端工作中我们会经常遇到元素的注册事件,当然jquery的点击和双击事件是可以实现的,jquery因其简短的代码即可实现功能而备受追捧,但是并不是所有的情况下都推荐使用jquery,比如有些会限制文件大小,有些则与jquery冲突的情况,这里文汇软件小编就来为大家介绍如何使用onClick和onDblClick在同一元素上执行。
最近项目中遇到了在同一DOM元素上需要添加单击和双击事件,但是发现该元素只会执行单击事件,其实原因与事件触发的先后顺序有关的,
ondblclick=onmousedown+onmouseup+onclick+onmouseup,因为onclick总是在ondblclick事件触发前所触发,所以总是执行onclick事件,这时我们需要对2个事件的处理函数稍作处理就可以实现2个事件并存了,代码如下:
var clickTimer = null;
function dj(){
if(clickTimer) {
window.clearTimeout(clickTimer);
clickTimer = null;
}
clickTimer = window.setTimeout(function(){
// your click process code here
alert("单击");
}, 400);
}
function sj(){
if(clickTimer) {
window.clearTimeout(clickTimer);
clickTimer = null;
}
// your click process code here
alert("双击");
}
利用定时器延迟执行onclick事件,这样在双击过程中会取消中途触发的单击事件。然后事件完成后再清除定时器同时把变量设置为空,这样就可以完美解决了,。
好了,以上就是小编今天为大家分享的内容了,如果想关注更多小编的文章就来文汇软件看看吧。