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学习笔记1 数据类型
Jan 11 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 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
基于文本的搜索
2006/10/09 PHP
基于empty函数的判断详解
2013/06/17 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
python中字典(Dictionary)用法实例详解
2015/05/30 Python
Python函数的周期性执行实现方法
2016/08/13 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
Internet体系结构
2014/12/21 面试题
土木工程专业大学毕业生求职信
2013/10/13 职场文书
电大物流学生的自我评价
2013/10/25 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
网站推广策划方案
2014/06/04 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
科级干部培训心得体会
2016/01/06 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
python tkinter模块的简单使用
2021/04/07 Python
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android