首页 > web前端 > js教程 > onClick事件与onDblClick事件并存使用详解

onClick事件与onDblClick事件并存使用详解

php中世界最好的语言
发布: 2018-06-09 11:42:15
原创
2579 人浏览过

这次给大家带来onClick事件与onDblClick事件使用并存详解,onClick事件与onDblClick事件并存使用的注意事项有哪些,下面就是实战案例,一起来看一下。

本文实例讲述了JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法。分享给大家供大家参考,具体如下:

最近项目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件,如果按照正常的方式添加处理,结果发现只会执行 onclick,而不会执行 ondblclick;这时我们需要对2个事件的处理函数稍作处理就可以实现2个事件并存了,代码如下:

<script type="text/javascript">
 var clickTimer = null;
 function _click(){
   if(clickTimer) {
     window.clearTimeout(clickTimer);
     clickTimer = null;
   }
   clickTimer = window.setTimeout(function(){
      // your click process code here
      alert("你单击了我");
   }, 300);
 }
  function _dblclick(){
   if(clickTimer) {
     window.clearTimeout(clickTimer);
     clickTimer = null;
   }
   // your click process code here
   alert("你双击了我");
 }
</script>
<button onclick="_click();" ondblclick="_dblclick();">单击或双击我</button>
登录后复制

处理思想就是:利用定时器延迟执行onclick事件,这样在双击过程中会取消中途触发的单击事件。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

如何在项目中使用JS事件委托

从零开始操作微信小程序登录鉴权

以上是onClick事件与onDblClick事件并存使用详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
js
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板