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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
七个很有意思的PHP函数
May 12 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 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
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Django与JS交互的示例代码
2017/08/23 Python
Python中装饰器高级用法详解
2017/12/25 Python
python模拟表单提交登录图书馆
2018/04/27 Python
简单了解django orm中介模型
2019/07/30 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
python中Mako库实例用法
2020/12/31 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
护理自我鉴定范文
2013/10/06 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
在职证明格式样本
2015/06/15 职场文书
Python 多线程处理任务实例
2021/11/07 Python
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS