在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. Windows网络接口API函数

    Windows提供了一套非常轻量级的网络函数,方便进行网络应用开发,整理出来供参考使用. The following functions are used in Windows networking: ...

  2. shrink-to-fit(自适应宽度)

    自适应宽度是指当未明白设定容器的宽度(或外边距设为auto)时,在特定的情况下容器的宽度会依据情况自行设定.而设定的结果往往并非我们想要的. W3C规范中描写叙述了几种shrink-to-fit的情况 ...

  3. Spring中Adivisor和Aspect的差别（自我理解）

    在AOP中有几个概念: - 方/切 面(Aspect):一个关注点的模块化,这个关注点实现可能另外横切多个对象.事务管理是J2EE应用中一个非常好的横切关注点样例. 方面用Spring的Advisor ...

  4. 编程之美 set 10 队列中取最大值操作问题

    题目 假设有这样一个拥有三个操作的队列 1. Enqueue(v) 2. Dequeue() 3. MaxEle() 请设计一种数据结构和算法, 让 MAXELE 操作的时间复杂度尽可能的低 思路 1 ...

  5. NSUserDefaults设置bool值重启后bool只设置丢失问题

    本文转载至 http://blog.csdn.net/cerastes/article/details/38036875   NSUserDefaultsbool同步synchronize无效 今天使 ...

  6. Ubuntu16.04安装QQ（图文说明）

    导读 最近,因为工作需要,我安装了Ubuntu16.04,然而有好多不便,工作上的事情大多需要QQ联系,然而在Ubuntu上的WebQQ很是不好用,于是在网上搜索了好多个linux版本的QQ,然而不是 ...

  7. js 高程 22.1.4 函数绑定 bind() 封装分析

    js 高程 书中原话(斜体表示): 22.1.4 函数绑定 另一个日益流行的高级技巧叫做函数绑定.函数绑定要创建一个函数,可以在特定的this 环境中 以指定参数调用另一个函数.该技巧常常和回调函数与 ...

  8. Hibernate中双向的一对多关系

    何为双向,双向的意思就是你我之间可以互相通信(customer(1)和order(n)) 也就是说customer可以访问order,order也可以访问customer 二者构成了双向的关系 在Hi ...

  9. Oracle 删除表

    drop table books;的指令会将表放到回收站里, 用 flashback table "BIN$1Oiy3qm/QJubov1BwBUOgw==$0" to befor ...

  10. 引入 netty网关，向flume提交数据

    netty  处理http请求 package com.test; import io.netty.bootstrap.ServerBootstrap;import io.netty.channel. ...