jquery - jQuery如何在click、dblclick分离中处理定时器

Question

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

谷歌搜索导致成为一种技术，其中单击由计时器处理，当 dblclick 未取消它时，该计时器将启动。

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

Answer 1

您可以使用setTimeout()andclearTimeout()来实现定时器功能：

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

看下面的代码

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

Answer 3

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 插件/效果框架，可让您更轻松地开发插件和扩展。所以我希望这有助于实现这一目标！