如何使onClick和onDblClick在同一元素上并存

北京赛车网投平台在前端工作中我们会经常遇到元素的注册事件,当然jquery的点击和双击事件是可以实现的,jquery因其简短的代码即可实现功能而备受追捧,但是并不是所有的情况下都推荐使用jquery,比如有些会限制文件大小,有些则与jquery冲突的情况,这里小编就来为大家介绍如何使用onClick和onDblClick在同一元素上执行。

最近项目中遇到了在同一DOM元素上需要添加单击和双击事件,但是发现该元素只会执行单击事件,其实原因与事件触发的先后顺序有关的,

ondblclick=onmousedown+onmouseup+onclick+onmouseup,因为onclick总是在ondblclick事件触发前所触发,所以总是执行onclick事件,这时我们需要对2个事件的处理函数稍作处理就可以实现2个事件并存了,代码如下:

 <h4 style="text-align: center;"><input style="width: 100%" value="某落实存在问题的对策表" id="zdfxt_ins"/  onclick="dj();" ondblclick="sj();"><span id="zdfxt_cont"></span></h4>

北京赛车网投平台            <script type="text/javascript">

 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("双击");

 }

</script>

文汇软件

文汇软件

文汇软件

利用定时器延迟执行onclick事件,这样在双击过程中会取消中途触发的单击事件。然后事件完成后再清除定时器同时把变量设置为空,这样就可以完美解决了,。

好了,以上就是小编今天为大家分享的内容了,如果想关注更多小编的文章就来看看吧。


关键词:
返回列表

相关文章

相关案例