在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. hdu 1201:18岁生日（水题，闰年）

    18岁生日 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  2. hdu 2527:Safe Or Unsafe（数据结构，哈夫曼树，求WPL）

    Safe Or Unsafe Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  3. OEM无法启动：oracle/product/10.2.0/dbhome_1/oc4j/j2ee/OC4J_DBConsole_localhost.localdomain_orcl not found.

    配置OEM环境变量 ORACLE_UNQNAME=$ORACLE_SID 要想打开OEM的web管理程序,必须先启动Database listener,再启动Datebase Control端口监控程 ...

  4. 《Programming with Objective-C》第四章 Encapsulating Data

    Designated Initializer 不稳定的传送门 合成属性 Properties don’t always have to be backed by their own instance ...

  5. Linux中chown和chmod的区别和用法（转）

    chmod修改第一列内容,chown修改第3.4列内容: chown用法: 用来更改某个目录或文件的用户名和用户组. chown 用户名:组名 文件路径(可以是绝对路径也可以是相对路径) 例1:cho ...

  6. <span>和<div>标签的隐藏和显示切换

    <div class="axb"> <span id="tipStep1" class="fl" >第一步显示< ...

  7. java手写的动态数组JimisunArray

    /** * @Author:jimisun * @Description: * @Date:Created in 22:10 2018-07-18 * @Modified By: */ public ...

  8. [Android Tips] 17. 查看 APK 签名信息

    从 APK 文件中获取签名信息 方法一 $ keytool -list -printcert -jarfile <path of APK> 方法二 解压 APK 文件,释放出 META-I ...

  9. tomcat https 证书生成与配置

    第一步:生成证书 命令行输入: keytool -genkeypair -alias "tomcat" -keyalg "RSA" -keystore &quo ...

  10. Oracle Schema Objects——Tables——TableStorage

    Oracle Schema Objects Table Storage Oracle数据库如何保存表数据? Oracle Database uses a data segment in a table ...