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 相关文章推荐
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
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
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
Python内置函数reversed()用法分析
2018/03/20 Python
Django web框架使用url path name详解
2019/04/29 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
python之拟合的实现
2019/07/19 Python
python实现淘宝购物系统
2019/10/25 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
python生成并处理uuid的实现方式
2020/03/03 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
新品发布会主持词
2014/04/02 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
党支部意见范文
2015/06/02 职场文书
金榜题名主持词
2015/07/02 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
数据设计之权限的实现
2022/08/05 MySQL