在jQuery的事件绑定中，如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时，不会触发双击事件(dblclick)， 执行双击事件(dblclick)时却会触发两次单击事件(click)。

但有时候我们希望在执行双击事件的时候不去出发单击事件，那究竟该如何实现呢？

少bb 上代码 ：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <button>按钮</button>

    <script src="jquery.js"></script>

    <script>

        $(function () {

            // var time = null;

            //

            // $('div').click(function () {

            //     // 取消上次延时未执行的方法

            //     clearTimeout(time);

            //     //执行延时

            //     time = setTimeout(function(){

            //         //do function在此处写单击事件要执行的代码

            //     },300);

            // });

            //

            // $('div').dblclick(functin ({

            //     // 取消上次延时未执行的方法

            //     clearTimeout(time);

            //     //双击事件的执行代码

            // });

            // 单双击 的时间 间隔 是300ms

            // 如果解决 单双击冲突

            var timer = null;

            $('button').click(function(event) {

                clearTimeout(timer);

                // 定时器  300ms 一次性定时器

                timer = setTimeout(function(){

                    console.log('单机了');

                }, 300);

            });

            $('button').dblclick(function(event) {

                clearTimeout(timer);

                console.log('双机了');

            });

        })

    </script>

</body>

</html>

JQuery如何实现双击事件时不触发单击事件，解决鼠标单双击冲突问题的更多相关文章

  1. JQuery如何实现双击事件时不触发单击事件

    单击和双击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown, ...

  2. JQuery解决鼠标单双击冲突问题

    转自链接:https://www.shuzhiduo.com/A/xl560MKrzr/ 在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单 ...

  3. jQuery解决鼠标单双击问题

    html代码如下: <button>点击</button> JQ代码如下: <script> $(function () { // 编写相关jQuery代码 // ...

  4. jQuery 双击事件（dblclick）时，不触发单击事件(click)

    我这是转载的文字 原文地址:http://www.cnblogs.com/wyblog/archive/2011/12/15/2289219.html 万恶的双击事件啊!! 在jQuery的事件绑定中 ...

  5. [转]jQuery 双击事件（dblclick）时，不触发单击事件(click)

    例1: 链接:http://www.w3school.com.cn/jquery/event_dblclick.asp HTML 系列教程 浏览器脚本 服务器脚本 ASP.NET 教程 XML 系列教 ...

  6. jquery双击事件会触发单击事件

    实际工作中,我们经常会遇到在同一个元素上,绑定多种事件类型,比较常见的是单击事件和一些鼠标事件,一般而言影响不大.但是如果同时绑定单击事件和双击事件呢? 其实,只要能够想明白的话,解决方案也比较简单, ...

  7. focus([[data],fn]) 当元素获得焦点时，触发 focus 事件。

    focus([[data],fn]) 概述 当元素获得焦点时,触发 focus 事件.直线电机选型 可以通过鼠标点击或者键盘上的TAB导航触发.这将触发所有绑定的focus函数,注意,某些对象不支持f ...

  8. dblclick([[data],fn]) 当双击元素时，会发生 dblclick 事件。

    dblclick([[data],fn]) 概述 当双击元素时,会发生 dblclick 事件.大理石量具哪家好 当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click.在很短的 ...

  9. JS事件 加载事件（onload）注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。 2. 此节的加载页面，可理解为打开一个新页面时。

    加载事件(onload) 事件会在页面加载完成后,立即发生,同时执行被调用的程序. 注意:1. 加载页面时,触发onload事件,事件写在<body>标签内. 2. 此节的加载页面,可理解 ...

随机推荐

  1. ASP.NET MVC5 新特性：Attribute路由使用详解

    1.什么是Attribute路由?怎么样启用Attribute路由? 微软在 ASP.NET MVC5 中引入了一种新型路由:Attribute路由,顾名思义,Attribute路由是通过Attrib ...

  2. javascript new Date()函数在不同浏览器上返回不同的值

    今天是2015年3月16日,在IE 6 上new Date()返回给后台server的字符串格式为 "Mon Mar 16  00:00:00 UTC 0800 2015",而在f ...

  3. 苹果使用蓝汛CDN网络分发ios8

        2014年9月18日凌晨,苹果公司公布了全新的ios8系统正式版.不出所料的引发了空前高涨的"果粉"下载热潮.引爆整个苹果界.     ios8被业内称为"自Ap ...

  4. WPF进阶之接口（2）：IDisposable，ICollectionView

    废话不多说,进入正题,先来说说IDisposable,看例子(来自MSDN): using System; using System.ComponentModel; // 下面的例子将展示一个实施了I ...

  5. logback中MDC使用

    今天在项目发现别人写了很多MDC.put("taskid", "testThread/heart/main_heart");或者MDC.put("ta ...

  6. ubuntu-查看本机的ip地址

    打开终端中执行:ifconfig -a命令即可,如下图所示白色背景信息即是. 说明: enp0s3 表示第一块网卡, 其中 HWaddr 表示网卡的物理地址,可以看到目前这个网卡的物理地址(MAC地址 ...

  7. log4j2设置日志文件读写权限（filePermissions）

    spring-boot使用log4j2作为日志插件的时候需要设置日志文件的读写权限,可以File 上增加filePermissions,如: <File name="File" ...

  8. WEB安全番外第五篇--关于使用通配符进行OS命令注入绕WAF

    一.通配符简介: 一般来讲,通配符包含*和?,都是英文符号,*用来匹配任意个任意字符,?用来匹配一个任意字符. 举个例子使用通配符查看文件,可以很名下看到打卡的文件是/etc/resolv.conf: ...

  9. Kafka+SpringMVC+Maven应用示例

    本文借助主流SpringMVC框架向大家介绍如何在具体应用中简单快捷的使用kafka.kafka.maven以及SpringMVC在现在的企业级应用中都占据着非常重要的地位,所以本文将三者结合起来也可 ...

  10. Zabbix监控主动模式

    接上篇:Zabbix监控web,MySQL,TCP状态,Nginx 参考官方文档:https://www.zabbix.com/documentation/3.4/zh/manual zabbix默认 ...