Jquery绑定双击并单击一次

Question

在jquery中有什么东西可以让我区分双击和单击的行为吗？

当我将两个绑定到同一个元素时,只执行单击.

是否有一种方法可以在执行单击之前等待一段时间以查看用户是否再次点击？

谢谢 :)

Answer 1

我发现约翰斯特里克勒的答案并没有完全符合我的预期.在两秒钟窗口内第二次点击触发警报后,每次后续点击都会触发另一个警报,直到您再等一下再等待两秒钟.因此,使用John的代码,三次单击会发生两次双击,我希望它的行为就像双击然后单击一样.

我已经重新设计了他的解决方案,以这种方式运作,并以我的思维可以更好地理解的方式流动.我将延迟从2000减少到700,以更好地模拟我认为是正常灵敏度的感觉.这是小提琴:http://jsfiddle.net/KpCwN/4/.

谢谢你的基础,约翰.我希望这个替代版本对其他人有用.

var DELAY = 700, clicks = 0, timer = null;

$(function(){

    $("a").on("click", function(e){

        clicks++;  //count clicks

        if(clicks === 1) {

            timer = setTimeout(function() {

                alert("Single Click");  //perform single-click action    
                clicks = 0;             //after action performed, reset counter

            }, DELAY);

        } else {

            clearTimeout(timer);    //prevent single-click action
            alert("Double Click");  //perform double-click action
            clicks = 0;             //after action performed, reset counter
        }

    })
    .on("dblclick", function(e){
        e.preventDefault();  //cancel system double-click event
    });

});

Answer 2

"Nott Responding"给出的解决方案似乎触发了两个事件,双击时单击和dblclick.但我认为它指向了正确的方向.

我做了一个小改动,这是结果:

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

试试吧

http://jsfiddle.net/calterras/xmmo3esg/

Answer 3

当然,绑定两个处理程序,一个到click另一个dblclick.创建一个在每次单击时递增的变量.然后在设定的延迟后重置.在setTimeout函数中你可以做点什么......

var DELAY = 2000,
    clicks = 0,
    timer = null;

$('a').bind({
    click: function(e) {
        clearTimeout(timer);

        timer = setTimeout(function() {
            clicks = 0;
        }, DELAY);

        if(clicks === 1) {
            alert(clicks);
             //do something here

            clicks = 0;
        }

        //Increment clicks
        clicks++;
    },
    dblclick: function(e) {
        e.preventDefault(); //don't do anything
    }
});

Answer 4

您可以编写自己的click/dblclick自定义实现,让它等待额外的点击.我没有在核心jQuery函数中看到任何可以帮助您实现此目的的东西.

引用来自jQuery站点的.dblclick()

将处理程序绑定到同一元素的click和dblclick事件是不可取的.触发的事件序列因浏览器而异,有些事件在dblclick之前接收到两个点击事件,而其他事件只接收一个事件.双击敏感度(双击检测到的点击之间的最长时间)可能因操作系统和浏览器而异,通常可由用户配置.

Answer 5

看下面的代码

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