在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>

javascript 双击单机 解决办法相关推荐

  1. JavaScript 内存溢出解决办法 亲测有效

    Vue3是一款非常流行的JavaScript框架,它被广泛应用于Web前端开发中.在使用Vue3进行打包时,有时会遇到以下错误信息: "Ineffective mark-compacts n ...

  2. updatepanel失效怎么办_使用updatepanel后,javascript失效的解决办法

    在做.NET开发时,现在都常用UPDATEPANEL. 项目中加入了Jquery的使用,但有些Jquery的效果在和UpdatePanel一起使用后,在UpdatePanel中有控件发生了PostBa ...

  3. Excel打开一片空白,需再次双击进入解决办法

    1.快捷键"win+R"打开运行,输入--> regedit,打开"注册表编辑器". 2.对HKEY_CLASSES_ROOT\Excel.Sheet.1 ...

  4. ArcGIS Server发布服务失败解决办法及ArcGIS Server for Javascript影像图层加载透明度设置(2021.2.12)

    Windows更新或者安装应用导致的ArcGIS Server发布服务失败解决方案及WCS影像图层加载到网页地图后的透明度设置 1.前提环境 2.ArcGIS中发布服务到ArcGIS Server失败 ...

  5. JavaScript跨域总结与解决办法

    JavaScript跨域总结与解决办法 什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window ...

  6. 【Idea无法打开】Idea.bat可以正常打开,双击快捷方式无法打开解决办法

    问题描述: idea突然打不开,Idea.bat可以正常打开,双击快捷方式无法打开 问题分析; 非初次使用Idea,应该是手动误删或者下载的某些文件导致Visual C++文件被破坏 解决办法: 1. ...

  7. Vivado无法双击打开xpr工程文件的解决办法

    Vivado无法双击打开xpr工程文件的解决办法 之前安装的Vivado 2018.3,最近装了Vivado 2020.2,然后就没法双击打开xpr工程文件了,提示如下: Cannot locate ...

  8. Excel 2016双击无法打开文件的解决办法

    最近安装了Office 2016,在使用的过程中发现,每次要打开一个Excel文件时,双击该文件只能打开Excel的空界面,不能打开文件的实际内容,必须得再次双击一次该文件,才能显示出实际内容来.而同 ...

  9. javascript 功能受限、原因和解决办法(一则)

    为什么javascript功能会受限? 浏览器的JavaScript功能有可能被服务商.公司管理人员关闭了,以此来提高安全性! 比如:学校.网吧这种典型的环境. 另外,有的公司的防火墙.广澳屏蔽软件. ...

最新文章

  1. ubuntu建站遇到的mysql数据库问题
  2. 关于Keil-MDK
  3. atcoder A - Frog 1(DP)
  4. Java开发环境搭建详解
  5. Ubuntu 10.04 Beta 1发布
  6. JavaSpring框架有哪些优势?
  7. 基于Spring Boot 的Blog开发
  8. 微软服务器离线补丁工具包,自己动手离线集成Windows 7 SP1最新补丁
  9. 使用Battery Historian采集android耗电数据
  10. 502 Bad Gateway错误
  11. vue 基于eleui的自定义穿梭框Transfer
  12. codevs 4093 EZ的间谍网络
  13. NAT技术与代理服务器调研
  14. Java实现Base64的编码与解码
  15. 实现自动化测试,首先不是一个技术问题
  16. 微信开发者工具最新版本无法上传腾讯云代码(找不到腾讯云图标)
  17. mysql中ddl是什么_MySQL中DDL是什么意思
  18. 一起捉妖服务器还要维护多久,一起来捉妖:在线6小时被劝退?只需网络断开,跳过等待15分钟...
  19. oracle 没有锁 ora00054,ORA-00054锁等待问题
  20. Android Study Material Design 十 再探沉浸式

热门文章

  1. 2022 全球程序员薪酬报告出炉,看完我表示严重拖后腿了…
  2. 北方的干燥天气,南方的回南天,你喜欢哪个?
  3. 洛谷P4799 [CEOI2015 Day2] 世界冰球锦标赛 题解
  4. 数据分析师python 城市数据团_城市数据团 - 主页
  5. C语言打印数字直角三角形
  6. 关于PHP的成绩管理系统 (老师,管理员,学生,排课)
  7. No property parentId found for typ Spit! Did you mean 'parentid'?
  8. 【LaTex】beamer中插入GIF动画
  9. DW 2023年1月Free Excel 第六次打卡 查找函数
  10. 利用正则表达式爬取中国古诗文网