如何使用jQuery来处理click,dblclick分离中的计时器

我在http://abeautifulsite.net/notebook/58上使用jQueryFileTree,我想区分dblclick和click事件,因为点击总是由dblclick触发。

谷歌搜索引发了一种技术,其中点击由计时器处理,当dblclick不取消它时启动。

有没有什么方法可以用jQuery和jQuery示例以优雅的方式使用?

您可以使用setTimeout()clearTimeout()来实现计时器function:

 var timeout; var delay = 500; // Delay in milliseconds $("...") .click(function() { timeout = setTimeout(function() { // This inner function is called after the delay // to handle the 'click-only' event. alert('Click'); timeout = null; }, delay) } .dblclick(function() { if (timeout) { // Clear the timeout since this is a double-click and we don't want // the 'click-only' code to run. clearTimeout(timeout); timeout = null; } // Double-click handling code goes here. alert('Double-click'); } ; 

jQuery Sparkle通过实现单点自定义事件为此提供了一个干净优雅的解决方案。 通过这样做,您可以像任何其他事件一样使用它,因此:

 $('#el').singleclick(function(){}); // or event $('#el').bind('singleclick', function(){}); 

它还为一系列点击的上次和第一次点击提供自定义事件。 lastclick自定义事件实际上会传回点击量! 所以你可以做到这一点!

 $('#el').lastclick(function(event,clicks){ if ( clicks === 3 ) alert('Tripple Click!'); }); 

你可以在这里找到相应的演示,展示我刚才所说的内容以及定义自定义事件的源代码。 它是AGPL许可下的开源软件,因此您可以随心所欲地获取所需内容! :-)它也是日常积极开发的,所以你永远不会缺乏支持。

但最重要的是,它是一个DRY插件/效果框架,可以让您更轻松地开发插件和扩展。 所以我希望这有助于实现这一目标!

请查看以下代码

 $("#clickMe").click(function (e) { var $this = $(this); if ($this.hasClass('clicked')){ alert("Double click"); //here is your code for double click return; }else{ $this.addClass('clicked'); //your code for single click setTimeout(function() { $this.removeClass('clicked'); },500); }//end of else }); 

演示到这里http://jsfiddle.net/cB484/