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编写的第一人称射击游戏
Feb 25 Javascript
用js遍历 table的脚本
Jul 23 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 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
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
python将txt文件读取为字典的示例
2018/12/22 Python
python psutil模块使用方法解析
2019/08/01 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Python requests模块session代码实例
2020/04/14 Python
python算的上脚本语言吗
2020/06/22 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
购房意向书范本
2014/04/01 职场文书
社会实践评语
2014/04/28 职场文书
毕业生面试求职信
2014/06/23 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
单位接收函范文
2015/01/30 职场文书
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python