在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. JavaScript入门之函数返回值

    函数返回值 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  2. Leetcode: Construct Binary Tree from Preorder and Inorder Traversal, Construct Binary Tree from Inorder and Postorder Traversal

    总结: 1. 第 36 行代码, 最好是按照 len 来遍历, 而不是下标 代码: 前序中序 #include <iostream> #include <vector> usi ...

  3. STL map 的 key 元素

    在做 compiler 语义分析时, 需要用到 map<?,?> 在别人的代码上做扩展, 所以有些代码是不能动的 这时, 需要一个 map<symbol,int> 的数据结构, ...

  4. 第一次广搜！HDU1548--A Strange Lift

    一上来看见题目就用了深搜(因为只会深搜)果断内存超限(据说时间也会超限)无奈只好开始用广搜 其实广搜的思路和深搜有很多类似的地方 不过实现的过程中用到了队列 因此有点难以理解(好吧我个人认为) 这题是 ...

  5. eclipse中设置在编译运行项目之前自动保存修改的文件

    Window -> Preferences -> General -> Workspace -> “Save automatically before build” Windo ...

  6. Servlet------>ServletConfig和ServletContext

    原理图: 之一--------->servletConfig 有些时候,有些参数不适合写死,而且初始化servlet要用,可以通过这个头来调用servletConfig 例如:serlet数据库 ...

  7. UITextView 的 return响应事件

    在UITextView里没有UITextField里的- (BOOL)textFieldShouldReturn:(UITextField *)textField;直接的响应事件;那么在TextVie ...

  8. Spark Streaming源码分析 – DStream

    A Discretized Stream (DStream), the basic abstraction in Spark Streaming, is a continuous sequence o ...

  9. 剑指Offer——不用加减乘除做加法

    题目描述: 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 分析: "^"是不带进位的加法. "&"可以得到所有进位位组 ...

  10. django将数据库中数据直接传到html

    1.当然,前提是建立和配置好django数据库啦~ 2.在python后台函数中引入需要的表 #要读取home这个APP下的models.py文件,引入其中的Student_message_unedi ...