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

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

编写测试代码

引起冲突的代码：

问题效果展示：

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

解决冲突的代码：

解决问题效果展示：

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

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

我这里两个单击事件触发的时间间隔设置在等于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单击和双击事件冲突解决方案，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • jquery ezUI 双击行记录弹窗查看明细的实现方法

    第一步:给DataGrid绑定onDblClickRow事件: <table title="" id="dataTable" class="easyui-datagrid" style="height: 500px;" data-options=" url: '/ajaxget.aspx?_t='+new Date().getTime()+'&_action=SVNGetHandler.GetSearc

  • 使用jQuery避免鼠标双击的解决方案

    介绍 当用户双击DOM对象(例如按钮和链接等)时,对于用户交互一直是个麻烦的问题. 幸运的是, jQuery 提供了一个相当棒的解决方法. 那就是.one(). .one()这个方法是做什么的? 它附加了一个元素事件的处理程序并且每个元素只能运行一次事件处理器函数. 参数 .one( events [, selector ] [, data ], handler(eventObject) ) events 类型: String •规定添加到元素的一个或多个事件.由空格分隔多个事件.必须是有效的事

  • jquery ajax双击div可直接修改div中的内容

    jquery ajax双击div可直接修改div中的内容

    最近在做后台功能开发的时候,用到对排序字段的修改,感觉只为了修改一个排序值,而要重新进入编辑页比较麻烦,于是网上找点资料自己动手写了一个jquery双击实现直接修改排序值的效果: html代码: <div title="[双击可直接修改]" class="changeSort" id="{$id}">{$sort}</div> JS代码: <script type="text/javascript"

  • jQuery实现防止提交按钮被双击的方法

    本文实例讲述了jQuery实现防止提交按钮被双击的方法.分享给大家供大家参考.具体实现方法如下: $("#submit").one('click', function (event) { event.preventDefault(); //do something $(this).prop('disabled', true); }); 希望本文所述对大家的jQuery程序设计有所帮助.

  • jQuery防止click双击多次提交及传递动态函数或多参数

    今天是写的是关于JQ的双击事件防止多次提交的问题,并且通过函数可以批量定义,通能性更强了,通过方法动态绑定元素的事件.而且可以动态传递函数名或者多参数等(本实例只传递函数名通过Eval调用). 我们都知道在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click).即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblcl

  • jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法

    本文实例讲述了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法.分享给大家供大家参考,具体如下: JS鼠标双击事件 onDblClick <td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %> </td> 这里的本人用绑定的值是传的当前行对应的ID号 function ShowEle

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

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

    本人需要给bootstrap-treeview的树节点添加双击事件.而该插件原生方法中不带双击事件功能.该插件的节点默认绑定的单击事件,由此引起了单击事件和双击事件的冲突. 编写测试代码 引起冲突的代码: 问题效果展示: 每一次触发双击事件都会引起两次单击事件 解决冲突的代码: 解决问题效果展示: 完美解决单击事件和双击事件冲突问题 这里主要用到两个HTMLDOMWindow对象中函数,settimeout(),clearTimeout() 我这里两个单击事件触发的时间间隔设置在等于300毫秒,

  • vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作

    Vue 事件处理方法 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. v-on:click 单击事件 <button class=" btn btn-info" v-on:click="add(1)"> + + </button> <button class=" btn btn-danger " v-on:click="subtract(1)">

  • js鼠标单击和双击事件冲突问题的快速解决方法

    情况一 如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件,当在这个DOM对象上发生双击事件时,第一次点击(click)会 触发一次单击(click)事件,第二次点击(连续的)也会触发双击(dblclick)事件,还是会触发单击(click)事件(IE7与 firefox). 解决方法: <button onclick="test(1)" ondblclick="test(2)"></button> <scr

  • 单击和双击事件的冲突处理示例代码

    单击和双击事件的冲突处理示例代码

    先上代码: 复制代码 代码如下: <head> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(function ()

  • jquery.jstree 增加节点的双击事件代码

    jquery.jstree 增加节点的双击事件代码

    jsTree 是基于jquery的树插件,支持拖放.复制.删除.快捷键.多选.自定义节点图标.自定义右键菜单.跨页面保存状态等等,总之我想到的它基本上都有了,而且最值得表扬的是它让人感觉一点都不慢哦. jsTree有节点选择事件,即 复制代码 代码如下: .bind("select_node.jstree", function(e, data) { //alert(data.rslt.obj.attr("id") + ":" + data.rsl

  • JS实现鼠标单击与双击事件共存

    一直都认为在Web开发中,双击事件都是少至又少地使用,直到最近项目需要,要在一个按钮上绑定单击与双击两件事件.开始也觉得不就是给按钮绑下两个事件而已罢了--只是后来才明白,是我想得太简单,在双击事件触发的同时也会触发单击的~囧 通过一番研究后,终于利用JS中"setTimeout"延时执行方法的办法,将单击延迟300毫秒执行才解决了,代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

  • Android 自定义View实现单击和双击事件的方法

    自定义View, 1. 自定义一个Runnable线程TouchEventCountThread ,  用来统计500ms内的点击次数 2. 在MyView中的 onTouchEvent 中调用 上面的线程 3. 自定义一个Handler, 在TouchEventHandler 中 处理 统计到的点击事件, 单击, 双击, 三击, 都可以处理 核心代码如下: public class MyView extends View { ...... // 统计500ms内的点击次数 TouchEvent

  • JS中touchstart事件与click事件冲突的解决方法

    前言 移动互联网是未来的发展趋势,现在国内很多互联网大佬都在争取移动这一块大饼,如微信及支付宝是目前比较成功的例子,当然还有各种APP和web运用. 下面这篇文章主要介绍了关于JS中touchstart事件与click事件冲突解决的相关内容,下面话不多说了,来一起看看详细的介绍吧. 一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart 事件代替 cl

  • bootstrap-treeview自定义双击事件实现方法

    bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等.但是不知为什么这个插件没有自带双击事件. 经过多次测试,使用方法$('#tree').dblclick( function () {})和方法$('#tree').on('dblclick',function(){})都不起作用!百思不得其解.最后救助大神,问题解决了,但是

  • jquery中dom操作和事件的实例学习 下拉框应用

    今天这个demo是有关下拉框的. 复制代码 代码如下: <div class="centent"> <select multiple="multiple" id="select1" style="width:100px;height:160px;"> <option value="1">选项1</option> <option value="2

随机推荐