在jQuery事件绑定中,dbclick可以触发两次click事件。例如一个DOM元素div,既绑定了 click 事件,又绑定了 dblclick 事件,这两个事件分别要做独立的事情。事件处理上没有冲突,都可以各自完成各自的操作。双击的时候虽然是执行了 dblclick 事件,但是在这之前,也执行了click 事件,那么,如何来禁止或者说屏蔽这次多余的 click 事件呢?本文将提供给您一个比较好的解决办法。

产生原理分析
  首先,来了解一下点击事件发生的先后顺序:

单击:mousedown, mouseup, click
双击:mousedown, mouseup, click, mousedown, mouseup, click, dblclick
  由此看来,dblclick 事件发生之前,实际上发生了两次 click 事件。其中,第一次的 click 是会被屏蔽掉,但是第二次则不会,所以就出现在双击的时候,也触发 click 事件。

解决办法
  知道了原因,接下来自然就是想办法把这次 click 给屏蔽掉,但是由于各浏览器均未提供直接去停止事件的方法,所以值得改变思路。
  由于我们只需要屏蔽一次 click 事件即可,由此联想到,可以利用 setTimeout() 方法来延时完成 click 事件的处理,在需要停止 click 的时候利用 clearTimeout() 方法停止这一事件的处理。这样,就可以比较容易的写出如下的 javascript 代码:

var timer = null; function do_click(event) {
 clearTimeout(timer); // 这里加一句是为了兼容 Gecko 的浏览器 /
if (event.detail == 2)
return ;
// 同上句的作用
timer = setTimeout(function() {
// click 事件的处理
}, 300); }
function do_dblclick(event) {
clearTimeout(timer);
 // dblclick 事件的处理
}

问题总结
  从测试结果来看,如果前后两次点击的时间在 300ms 左右的时候,还是很容易出现 click 和 dblclick 事件被“同时”调用的情况,而如果间隔的时间更短或更长,则只会有 click 或 dblclick 事件。
  所以,应该说这个方法已经在很大程度上,避免了 click 和 dblclick 事件的“同时”存在问题。当然,它还没有达到完全解决的程度。

注意
    windows 的控制面板里是可以调鼠标的双击速度的(Linux 等系统下能不能调,俺就不清楚了),这点对于程序还是有一定影响,大家可以自己调节下试试看~
经过测试,延时 300ms 是一个比较理想的事件,既考虑到对鼠标操作并不十分顺利的朋友,也兼顾 click 事件的响应速度

以上代码,只在 IE6、FF3、Chrome 中测试过,并未出现问题

w3c标准是没有dblclick的,而是通过event.detail来判断是单击或双击

**********************************************************************

**********************************************************************

《判断是否双击》

<input type="button" οnclick="OneClick()" οndblclick="TwoClick()" value="点我">
                                    <script language="javascript">
                                        var v_Result;
                                        function OneClick() {
                                            v_Result = false;
                                            window.setTimeout(OneClick_Nei, 500)
                                            function OneClick_Nei() {
                                                if (v_Result != false) return;
                                                alert("单击");
                                            }
                                        }
                                        function TwoClick() {
                                            v_Result = true;
                                            alert("双击");
                                        }
                                    </script>

解决jQuery中dbclick事件触发两次click事件相关推荐

  1. ajax点击事件无法触发,解决jQuery Ajax动态新增节点无法触发点击事件的问题_婳祎_前端开发者...

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写οnclick="" ...

  2. jQuery使用blur()方法触发两次的解决方法

    jQuery使用blur()方法触发两次的解决方法 参考文章: (1)jQuery使用blur()方法触发两次的解决方法 (2)https://www.cnblogs.com/wgl1995/p/92 ...

  3. js双击会触发两次单击事件的解决方案

    问题描述: javascript中,onclick为单击事件,ondblclick为双击事件,在同一DOM 对象上加上单击事件和双击事件时,双击会触发两次单击事件. 解决方案: 通过设置两次点击事件的 ...

  4. C#之敲击回车键触发Button的Click事件

    C#之敲击回车键触发Button的Click事件 在做项目时,需要在TextBox控件中输入指令,点击Button后将指令传给下位机.为了简化操作,想直接敲击回车键实现Button的Click事件来发 ...

  5. html中hover无法触发,jQuery中trigger无法触发hover事件解决方法

    做jquery练习的时候需要在外部触发元素的"hover"事件,于是,问题来了:根本没有触发,无论是trigger( )还是triggerHandler( ),查询后得知: Dep ...

  6. jQuery —— 元素绑定单击事件(click),但是双击该元素也能触发单击事件,同时会触发两次单击事件的问题

    最近做项目遇到一个问题,给元素绑定了单击事件,但是双击该元素时同样会触发单击事件,并且触发两次的问题,网上找了解决办法基本上都是用 clearTimeout .setTimeout 解决,但是效果不是 ...

  7. 在JS/jQuery中,怎么触发input的keypress/keydown/keyup事件?

    怎么触发keypress/keydown/keyup事件? 问题: 1.在之前的写的input后面添加了搜索按钮 2.input只有keyup事件,如下: $("#desktop_folde ...

  8. Qt中槽函数触发两次的两种场景分析

    在Qt开发中,有两种情况能够触发槽函数被触发两次,第一种情况是必现的,属于错误的写法,是指信号和槽关联两次:第二种情况是偶然出现的,是指对信号没有正确理解导致的. 1.信号与槽关联两次     通常这 ...

  9. jQuery中ajax的触发时机,javascript - 如何在启动Ajax查询的jQuery中触发方法change() - 堆栈内存溢出...

    我有一个带有部门清单的选择项目html. 当我选择一个(方法"更改")时,它将在jquery中启动ajax请求,该请求将显示在另一个select输入中,即从数据库中获取的城市列表. ...

  10. 事件触发控制_基于事件触发机制的直流微电网多混合储能系统分层协调控制方法...

    点击下面标题,了解通知详情第九届电工技术前沿问题学术论坛征文通知 华北电力大学电气与电子工程学院的研究人员郭伟.赵洪山,在2020年第5期<电工技术学报>上撰文,以含有多个混合储能系统(H ...

最新文章

  1. COCO新记录:60.6AP!微软提出采用注意力机制进行检测头统一的Dynamic Head
  2. 剑指offer 平衡二叉树
  3. 概率统计:第五章 大数定律与中心极限定理
  4. C++学习 | 面试官:我们只想要这样的C++工程师
  5. [css] 使用sass的方式有哪些?
  6. java foreach6_Java foreach循环是否会创建一个新对象?
  7. c语言寻找最小路集,寻找一个准确的方法来用C语言编写微基准小的代码路径++和在Linux / OSX上运行...
  8. 互斥锁必须用同一个吗_04 | 互斥锁(下):如何用一把锁保护多个资源?
  9. 风起云涌、战火通明,2019 年云计算大盘点
  10. 幼儿园调查过程怎么写_幼儿园对孩子的重要性你真的清楚吗?
  11. Flask数据库学习
  12. php 支付宝用户信息授权,支付宝登录获取用户信息授权
  13. QQ和360大战的这场戏我的看法
  14. 二进制堆的C++实现及其在机器调度(LPT)上的简单应用
  15. 【沃顿商学院学习笔记】公益创业——01开始公益创业Starting a Social Enterprise
  16. 构建神经网络- 手写字体识别案例
  17. spring-boot 深入学习
  18. 数据中心的双活与灾备方案设计
  19. Unity 关于Destroy 和 OnDestroy失效(延迟)的问题
  20. 来自中国各大高校著名导师的精品课程!绝对精典

热门文章

  1. 哎,老了之display-box
  2. 重磅!Google ARCore 和京东 AR 联合举办消费应用创新大赛
  3. Xshell5 访问虚拟机Ubuntu16.04
  4. 遂宁让“智慧城市”融入绿色经济发张
  5. PHP mcrypt可逆加密算法分析
  6. 回忆我的军训,好怀念那时啊!
  7. OA系统身份认证的设计
  8. 22. 用户身份切换用户的特殊 shell与 PAM模块
  9. 26.Yii 模块(2)
  10. 104. 字符串函数