Question

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

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

有没有什么方法可以以优雅的方式与jQuery和jQuery示例一起使用？

Answer 1

您可以使用setTimeout()和clearTimeout()来实现计时器功能：

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');
    }
;

Answer 2

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

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

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

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

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

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

Answer 3

请查看以下代码

$("#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/

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

3 个答案: