页面上有个div绑定了 click 事件,又绑定了 dblclick 事件。这两个事件分别处理各自的逻辑。现在的问题是当双击的时候虽然是执行了 dblclick 事件,但是在这之前,也执行了 click 事件。如何来屏蔽这次多余的 click 事件呢?

2011-02-05 19:44:15

3 Answers

在双击事件(dblclick)过程中,触发的两次单击事件(click)中,第一次的单击事件(click)会被屏蔽掉,但第二次不会。也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。 所以我们只要屏蔽一次click事件就可以了。 

var intervalTimer = null; function do_click(event) { clearTimeout(intervalTimer); //取消上次延时未执行的方法 intervalTimer = setTimeout(function() { // click 事件的处理 }, 500); } function do_dblclick(event) { clearTimeout(intervalTimer); // dblclick 事件的处理 }
2011-02-05 21:58:54

解决的办法就是两次点击事件的间隔时间,如果第一次点击和第二次单击不会超过一定时间(例如:300毫秒),如果小于指定的时间间隔,那么就可以认定为双击事件,否则为单击事件。 

<script language="javascript"> var item = ''; function doClick(n) { item = n; var timer = setTimeout("callBack()",3 00); if(item==2){ clearTimeout(timer); } } function callBack() { if(item==1){ //单击事件 } else if(item==2){ //双击事件 } } </script> <div onclick="doClick(1)" ondblclick="doClick(2)"></div>
2011-02-05 22:55:49

用jquery实现。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var Test = { times: 0, timer: null, logs: [], first: null, last: null, do_click: function() { var self = Test; self.start(); clearTimeout(self.timer); self.times++; self.timer = setTimeout(function() { self.logs.push('click'); self.echo(); }, 300); }, do_dblclick: function() { var self = Test; clearTimeout(self.timer); self.logs.push('dblclick'); self.echo(); }, start: function() { if (this.first == null) { this.first = new Date().getTime(); } }, end: function() { if (this.last == null) { this.last = new Date().getTime(); } }, get_time: function() { return (this.last - this.first) || 0; }, echo: function() { var self = Test; self.end(); var log = 'No.' + self.times + '; Use time: ' + self.get_time() + 'ms; Event: ' + self.logs.join(', ') + ';<br />\n'; $('#log').prepend(log); self.first = null; self.last = null; self.logs = []; }, init: function() { $(document).ready(function() { $('div').click(Test.do_click).dblclick(Test.do_dblclick); }); } }; Test.init(); </script> </head> <body> <div style="width:200px; height:50px; border:1px solid #999;">Click / DblClick Me!</div> Log:<br /> <textarea id="log" rows="20" cols="50"></textarea> </body> </html>
2011-02-06 00:46:38
您不能回答该问题或者回答已经关闭!

相关文章推荐

  • C#中using指令的几种用法

    using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到

  • C#实例解析适配器设计模式

    将一个类的接口变成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够一起工作

  • C#开发高性能Log Help类设计开发

    项目中要在操作数据库的异常处理中加入写Log日志,对于商业上有要求,写log时对其它操作尽可能影响小,不能因为加入log导致耗时太多

  • C#运行时相互关系

    C#运行时相互关系,包括运行时类型、对象、线程栈和托管堆之间的相互关系,静态方法、实例方法和虚方法的区别等等

  • C#协变和逆变

    “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型,“逆变”则是指能够使用派生程度更小的类型

  • 使用托管C++粘合C#和C++代码(二)

    本文实现一下C++代码调用C#代码的过程。我构造一个简单并且直观的例子:通过C++ UI 触发C# UI.

  • C#开发中的反射机制

    反射的定义:审查元数据并收集关于它的类型信息的能力。元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等

  • C#基础概念之延迟加载

    延迟加载(lazy load)是Hibernate3关联关系对象默认的加载方式,延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作

  • 使用托管C++粘合C#和C++代码(一)

    C#在xml读写,数据库操纵,界面构造等很多方面性能卓越;C++的效率高,是底层开发的必备武器

  • C#中的索引器的简单理解和用法

    C#中的类成员可以是任意类型,包括数组和集合。当一个类包含了数组和集合成员时,索引器将大大简化对数组或集合成员的存取操作

  • Async和Await使异步编程更简单

    C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作

  • 深入C# 序列化(Serialize)、反序列化(Deserialize)

    C#中的序列化和反序列化,序列化是.NET运行时环境用来支持用户定义类型的流化的机制