JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法


Posted in Javascript onJune 07, 2018

本文实例讲述了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事件,这样在双击过程中会取消中途触发的单击事件。

PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.3water.com/table/javascript_event

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
AngularJS语法详解
Jan 23 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
Javascript的promise,async和await的区别详解
Mar 24 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 #Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 #jQuery
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 #Javascript
AngularJS 前台分页实现的示例代码
Jun 07 #Javascript
浅谈PDF.js使用心得
Jun 07 #Javascript
vue better scroll 无法滚动的解决方法
Jun 07 #Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 #Javascript
You might like
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
smarty section简介与用法分析
2008/10/03 PHP
php 404错误页面实现代码
2009/06/22 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
python读写文件操作示例程序
2013/12/02 Python
常用python数据类型转换函数总结
2014/03/11 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
python中reload(module)的用法示例详解
2017/09/15 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
香港士多网上超级市场:Ztore
2021/01/09 全球购物
行政文员岗位职责
2013/11/08 职场文书
资产经营总监岗位职责范文
2013/12/01 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
期末个人总结范文
2015/02/13 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript