Hpyer 的未知空间 » dblclick http://hpyer.cn 现实的世界里寻找点滴的未知空间 Wed, 01 Feb 2012 02:16:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Javascript 中 click 和 dblclick 事件冲突问题的解决办法 http://hpyer.cn/solution-for-javascript-of-click-and-dblclick-event.html http://hpyer.cn/solution-for-javascript-of-click-and-dblclick-event.html#comments Sat, 27 Sep 2008 14:21:34 +0000 Hpyer http://hpyer.cn/?p=234 　　一个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 代码：

  1. var timer = null;
  2.  
  3. function do_click(event) {
  4.     clearTimeout(timer); // 这里加一句是为了兼容 Gecko 的浏览器
  5.     // if (event.detail == 2) return ; // 同上句的作用
  6.  
  7.     timer = setTimeout(function() {
  8.         // click 事件的处理
  9.     }, 300);
  10. }
  11.  
  12. function do_dblclick(event) {
  13.     clearTimeout(timer);
  14.     // dblclick 事件的处理
  15. }

测试代码：
需要 jQuery 类库，你可以从 jquery.com 获取到最新版本

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Test</title>
  5. <script type="text/javascript" src="jquery.js"></script>
  6. <script type="text/javascript">
  7. var Test = {
  8.     times: 0,
  9.     timer: null,
  10.     logs: [],
  11.     first: null,
  12.     last: null,
  13.     do_click: function() {
  14.         var self = Test;
  15.         self.start();
  16.         clearTimeout(self.timer);
  17.         self.times++;
  18.         self.timer = setTimeout(function() {
  19.             self.logs.push('click');
  20.             self.echo();
  21.         }, 300);
  22.     },
  23.     do_dblclick: function() {
  24.         var self = Test;
  25.         clearTimeout(self.timer);
  26.         self.logs.push('dblclick');
  27.         self.echo();
  28.     },
  29.     start: function() {
  30.         if (this.first == null) {
  31.             this.first = new Date().getTime();
  32.         }
  33.     },
  34.     end: function() {
  35.         if (this.last == null) {
  36.             this.last = new Date().getTime();
  37.         }
  38.     },
  39.     get_time: function() {
  40.         return (this.last - this.first) || 0;
  41.     },
  42.     echo: function() {
  43.         var self = Test;
  44.         self.end();
  45.         var log = 'No.' + self.times + '; Use time: ' + self.get_time() + 'ms; Event: ' + self.logs.join(', ') + ';<br />\n';
  46.         $('#log').prepend(log);
  47.         self.first = null;
  48.         self.last = null;
  49.         self.logs = [];
  50.     },
  51.     init: function() {
  52.         $(document).ready(function() {
  53.             $('div').click(Test.do_click).dblclick(Test.do_dblclick);
  54.         });
  55.     }
  56. };
  57. Test.init();
  58. </script>
  59. </head>
  60. <body>
  61. <div style="width:200px; height:50px; border:1px solid #999;">Click / DblClick Me!</div>
  62. Log:<br />
  63. <textarea id="log" rows="20" cols="50"></textarea>
  64. </body>
  65. </html>

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

需要注意的地方：

  • windows 的控制面板里是可以调鼠标的双击速度的（Linux 等系统下能不能调，俺就不清楚了），这点对于程序还是有一定影响，大家可以自己调节下试试看～
  • 经过测试，延时 300ms 是一个比较理想的事件，既考虑到对鼠标操作并不十分顺利的朋友，也兼顾 click 事件的响应速度
  • 以上代码，只在 IE6、FF3、Chrome 中测试过，并未出现问题
]]> http://hpyer.cn/solution-for-javascript-of-click-and-dblclick-event.html/feed 0