`

javascript 双击单机 解决办法

 
阅读更多

          在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" onclick="OneClick()" ondblclick="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>

分享到:
评论

相关推荐

    FullCalendar扩展双击事件

    确保你的解决方案同时支持鼠标和触摸设备,可以使用`touchstart`和`mousedown`事件来模拟双击,同时监测两个事件之间的时间差。 ```javascript var touchStartTime = null; $(document).on('touchstart mousedown'...

    js单击事件和双击事件并存绑定

    在JavaScript编程中,事件处理是页面交互的核心部分。"js单击事件和双击事件并存绑定"这个主题涉及到如何让一个元素同时响应单击(click)和双击(dblclick)事件,而不互相冲突。这在实现某些交互功能时非常有用,...

    JS中双击和单击事件冲突的解决方法

    解决这种冲突的基本思路是通过设置一个延时器来区分单击和双击。当单击事件触发时,启动一个定时器,等待一段时间(例如300毫秒),如果在这段时间内没有再次触发单击事件,那么就执行单击事件的处理函数;如果在这...

    vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作

    可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。 v-on:click 单击事件 &lt;button class=” btn btn-info” v-on:click=”add(1)”&gt; + + &lt;/button&gt; &lt;button class=” btn btn-...

    W3cshool文档单机版

    "W3cshool文档单机版"是一款专为Web开发者设计的学习工具,它包含了丰富的Web开发相关知识,包括HTML、CSS、JavaScript、SQL等核心技术。这个单机版的最大优势在于,用户无需连接互联网,就可以随时随地查阅和学习...

    怎么复制图片网页的文字.pdf

    有些网站使用JavaScript语言来防止文字复制,我们可以通过禁用JavaScript脚本来解决这个问题。方法是:点击IE的“工具”→“Internet选项”菜单,进入“安全”标签页,选择“自定义级别”,将所有脚本全部禁用,然后...

    jQuery事件及绑定.pptx

    单机鼠标左键时触发 dbclick() 双击鼠标左键时触发 键盘 keypress() 键盘按键(Shift、CapsLock等非字符键除外)被按下时触发 keydown() 键盘按键被按下时触发 焦点 keyup() 键盘按键被松开时触发 onfocus() 获取焦点...

    b/s架构系统通用客户端

    用户可以通过阅读这份文档了解如何操作和利用该客户端与销售管理系统进行交互,包括如何登录、功能操作、问题解决等内容。 3. 美亚销售管理系统.pdf:可能是更详细的系统介绍或者更新版本的说明书,提供了关于美亚...

    有些网页的内容为什么不能复制.pdf

    有时候,我们可能会遇到一些网页的内容无法复制,这是因为这些网页使用了JavaScript语言来屏蔽复制操作。要解决这个问题,我们可以按照以下步骤进行: 1. 在IE浏览器中,点击“工具”→“Internet选项”,然后选择...

    google chrome离线安装包下载 | Google Chrome(谷歌浏览器)官方中文版32位V90.0.4430.212

    1. **速度与性能**:Google Chrome采用了高效的Blink渲染引擎,能够快速加载网页并处理复杂的JavaScript,提供流畅的浏览体验。 2. **安全性**:内置的恶意软件和 phishing(网络钓鱼)防护机制,可以有效防止用户...

    HTML文本代码

    仅用HTML文本编程的树形下拉菜单(单机显示,双击隐藏)。

    json解析工具

    在Mac上运行这个应用,用户可能需要将它拖放到应用程序文件夹,然后双击启动。 在实际开发过程中,JSON解析工具有助于开发者快速定位问题,比如在API接口调用时返回的JSON数据格式错误,或者在前端页面中加载的JSON...

    教你复制不能复制的网页文字

    将你的鼠标放在此电子书文本的右下方,按住“Shift”单机鼠标右键,再点击鼠标左键就会出现,然后在选中的文本上方点住鼠标左键,将其拖拽到 Word 文档中,OK搞定了! 方法七:删除网页代码 打开你想要复制的...

    Asp本地测试工具

    2. **运行AspWebServer**:完成第一步后,你只需双击下载的"aspWebServer"文件,该程序就会自动启动并监听一个本地端口,通常是8080或其它未被占用的端口。AspWebServer作为一个轻量级的Web服务器,会解析并执行www...

    微信小程序-微信飞机游戏

    7. 联网功能:虽然这是一个单机游戏,但微信小程序也可以实现联网功能,比如排行榜系统,用户可以将自己的成绩上传到云端,与其他玩家进行竞争,增加游戏的社交性。 综上所述,微信飞机游戏在技术上涉及了用户交互...

    实验一脚本及恶意网页病毒汇编.pdf

    在网页中使用 JAVASCRIPT、VBSCRIPT、ACTIVEX 等网页脚本语言,结合 WSH 的功能,利用多种网络漏洞实现病毒代码的嵌入。 四、实验步骤 (一)创建网页脚本病毒 1. 打开实验中要运行的脚本代码,如下图所示: 2. ...

    教你复制那些复制不了的网页文字

    这个保存的路径你一定要清楚,不然你忘了,没有办法找到的啊,找到合适的路径你就下载下来下载之后你用 WORD 打开就行了啊,一般的只要要在 WORD 可以打开看到的就可以复制,排版了! 方法六:拖拽文字 打开一本...

    jdk8 for mac

    7. ** Nashorn JavaScript引擎**:内置JavaScript引擎,使得Java可以与JavaScript代码交互,增强Java的动态性。 安装JDK8 on Mac的步骤通常包括: 1. 下载JDK8的.dmg安装文件。 2. 双击打开.dmg文件,将JDK拖动到...

    Firefox火狐浏览器官方68.6.1esr-win32版本msi安装包

    2. 性能优化:对JavaScript引擎进行了优化,提高了页面加载速度和浏览器响应速度,带来更流畅的浏览体验。 3. 隐私保护加强:增强了跟踪保护功能,阻止第三方跟踪器,保护用户隐私。 4. 支持WebExtensions:68.6.1...

    asp本机调试工具《单文件版》

    - 使用CSS和JavaScript来增强用户体验,这两者通常与ASP结合使用,实现动态交互效果。 总之,"asp本机调试工具《单文件版》"提供了一种方便快捷的方式来本地调试ASP程序,通过理解和利用其功能,开发者可以更高效地...

Global site tag (gtag.js) - Google Analytics