jquery单击事件和双击事件冲突解决方案


Posted in Javascript onMarch 02, 2016

本人需要给bootstrap-treeview的树节点添加双击事件。而该插件原生方法中不带双击事件功能。该插件的节点默认绑定的单击事件,由此引起了单击事件和双击事件的冲突。

编写测试代码

引起冲突的代码:

jquery单击事件和双击事件冲突解决方案

问题效果展示:

jquery单击事件和双击事件冲突解决方案

每一次触发双击事件都会引起两次单击事件

解决冲突的代码:

jquery单击事件和双击事件冲突解决方案

解决问题效果展示:

jquery单击事件和双击事件冲突解决方案

完美解决单击事件和双击事件冲突问题

这里主要用到两个HTMLDOMWindow对象中函数,settimeout(),clearTimeout()

jquery单击事件和双击事件冲突解决方案

我这里两个单击事件触发的时间间隔设置在等于300毫秒,这里需要根据实际情况而定。

源码如下:

<!DOCTYPE html>
<html>

 <head>
  <meta charset="utf-8">
  <title></title>
 </head>

 <body>
  <div>事件监控</div>
 </body>
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript">
  /*$(function() {
     $("div").bind("click.a", function() { //单击事件 
      $("body").append("<p>click事件</p>");
     })
     $("div").bind("dblclick.a", function() { //双击事件 
      $("body").append("<p>dblclick事件</p>");
     })
     $("div").bind("mouseover.a", function() { //鼠标经过元素的事件 
      $("body").append("<p>mouseover事件</p>");
     })
     $("div").bind("mouseout.a", function() { //鼠标移出元素的事件 
      $("body").append("<p>mouseout事件</p>");
     })
    })*/
  $(function() {
   var timer = null;
   $("div").bind("click.a", function() { //单击事件 
    clearTimeout(timer);
    timer = setTimeout(function() { //在单击事件中添加一个setTimeout()函数,设置单击事件触发的时间间隔 
     $("body").append("<p>click事件</p>");
    }, 300);
   })
   $("div").bind("dblclick.a", function() { //双击事件 
    clearTimeout(timer); //在双击事件中,先清除前面click事件的时间处理 
    $("body").append("<p>dblclick事件</p>");
   })
   $("div").bind("mouseover.a", function() { //鼠标经过元素的事件 
    $("body").append("<p>mouseover事件</p>");
   })
   $("div").bind("mouseout.a", function() { //鼠标移出元素的事件 
    $("body").append("<p>mouseout事件</p>");
   })
  })
 </script>

</html>

以上就是jquery单击和双击事件冲突解决方案,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
微信小程序工具函数封装
Oct 28 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 #Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 #Javascript
javascript求日期差的方法
Mar 02 #Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 #Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 #Javascript
js实现不重复导入的方法
Mar 02 #Javascript
基于JavaScript实现智能右键菜单
Mar 02 #Javascript
You might like
重料打造自己的“宝马”---第三代
2021/03/02 无线电
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python聊天室实例程序分享
2016/01/05 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
2014年平安夜寄语
2014/12/08 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers