jquery同一元素支持单双击事件

发表于 2011 年 01 月 20 日 由 梦三秋

大家应该都知道javascript中鼠标单击和双击事件，一般情况下，对一个元素只需要绑定一个单击事件，或者绑定一个双击事件就可以了。但是有些特别的情况下，会对一个元素同时绑定单击和双击事件，并且这两个事件是不能相互干扰的。
用jquery的方法给一个元素同时绑定了单击和双击事件时，当我们双击时，结果为浏览器在响应一个双击事件的同时,还会响应一个单击事件。

从上面DEMO的演示中，我们会发现，当双击元素的时候，会先触发一次单击事件，然后再触发一次双击事件。

那么如何来实现当双击元素的时候，只触发元素绑定的双击事件而不触发元素绑定的单击事件呢？
下面来使用梦三秋开发的jquery区分鼠标单双击事件插件来具体实现给大家看看：

从上面的DEMO演示中，我们就可以实现双击事件只触发元素被绑定的双击事件，这样一来，元素的单双击事件就区分开来了。

接下来来看一个综合的例子：

HTML代码：
	<div id="div1">普通的单击和双击事件</div>
	<div id="div2">使用区分单双击插件</div>

jquery代码：
	$(function(){
	    //为ID为div1的div同时绑定普通的单双击事件
	    $("#div1").click(function(){
	        $(this).animate({left:"+=20"});//动画效果，让div1向右边滑动20个像素
	    }).dblclick(function(){
	        $(this).animate({top:"+=20"});//动画效果，让div1向下滑动20个像素
	    });
	 
	    //先初始化两个函数
	    var click_event = function(){//单击要触发的函数
	        $(this).animate({left:"+=20"});//注意：这里的this指向的是匹配的元素
	    };
	    var dblclick_event = function(){//双击要触发的函数
	        $(this).animate({top:"+=20"});//注意：这里的this指向的是匹配的元素
	    }
	    $("#div2").skygqOneDblClick({oneclick:click_event,dblclick:dblclick_event});//调用区分元素单双击事件的插件
	});

相信大家通过上面的几个例子，应该能看得很明白了这款插件已经能很好的区分鼠标的单双击事件了。

接下来就来和大家说说这个小插件的用法吧（其实上面的最后一个例子已经有了用法了。）
这个插件接受两个参数：
oneclick和dblclick
oneclick参数代表的是你要为匹配的元素绑定的单击事件触发的函数。
dblclick参数代表的是你要为匹配的元素绑定的双击事件触发的函数。
在这两个函数中，this指向的是匹配元素的对象，大家可以看最后一个DEMO就能明白了

这个插件很小，mini版的只有600多个字节，喜欢的可以点击下面的download图片拿走。

更新：
今天很感谢网友：yvonxiao 的提醒，要这个插件支持接收event。现在已经代码已经修正过了~~大家可以放心使用。为了方便大家能有更好的建议。我把插件源码帖出来吧~~上面的下载也是可以下载到源码的。

	;(function($){
	    $.fn.skygqOneDblClick = function(options){
	        return this.each(function(){
	            var s = $.extend({}, $.fn.skygqOneDblClick.Default, options || {});
	            var self_obj = this;
	            do_click = function(e){
	                clearTimeout(s.timer);
	                s.timer = setTimeout(function(){s.oneclick.call(self_obj,e);}, 400);
	            },
	            do_dblclick = function(e) {
	                clearTimeout(s.timer);
	                s.dblclick.call(self_obj,e);
	            };
	            $(this).click(do_click).dblclick(do_dblclick);
	        });
	    };
	    $.fn.skygqOneDblClick.Default = {
	        timer: null,
	        oneclick: $.noop,
	        dblclick: $.noop
	    };
	})(jQuery);

修改后的插件便能支持网友 yvonxiao 提出的这种用法了：

	$(function(){
	    var click_event = function(e){
	        $("#result").append("您单击了我");
	        alert("单击:"+e.target.tagName);
	    };
	    var dblclick_event = function(e){
	        $("#result").append("您双击了我");
	        alert("双击:"+e.target.tagName);
	    }
	    $("#div1").skygqOneDblClick({oneclick:click_event,dblclick:dblclick_event});
	});

大家如果有什么好的意见，请尽管说出来，谢谢了！
本文原地址：http://www.skygq.com/2011/01/20/jquery-%E5%8C%BA%E5%88%86%E9%BC%A0%E6%A0%87%E5%8D%95%E5%87%BB%E5%8F%8C%E5%87%BB%E4%BA%8B%E4%BB%B6%E6%8F%92%E4%BB%B6/