jQuery分别绑定双击和单击 [英] Jquery bind double click and single click separately

问题描述

jquery中是否有某些东西可以让我区分双击和单击的行为?

Is there something in jquery that would allow me to differentiate between behavior on double click and single click?

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

When I bind both to same element only the single click gets executed.

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

Is there a way that wait for some time before execution of the single click to see if the user clicks again or not?

谢谢:)

推荐答案

我发现John Strickler的回答并没有达到我的期望.一旦警报在两秒钟的窗口中第二次单击触发，则随后的每次单击都会触发另一个警报，直到您等待两秒钟再单击一次.因此，按照John的代码，三次单击相当于两次双击，我希望它像双击之后单击一样.

I found that John Strickler's answer did not quite do what I was expecting. Once the alert is triggered by a second click within the two-second window, every subsequent click triggers another alert until you wait two seconds before clicking again. So with John's code, a triple click acts as two double clicks where I would expect it to act like a double click followed by a single click.

我已经重新设计了他的解决方案，以这种方式发挥作用，并以使我的头脑更容易理解的方式流动.我将延迟从2000降低到700，以更好地模拟我感觉是正常的灵敏度.这是小提琴: http://jsfiddle.net/KpCwN/4/.

I have reworked his solution to function in this way and to flow in a way my mind can better comprehend. I dropped the delay down from 2000 to 700 to better simulate what I would feel to be a normal sensitivity. Here's the fiddle: http://jsfiddle.net/KpCwN/4/.

感谢基金会，约翰.我希望这个替代版本对其他人有用.

Thanks for the foundation, John. I hope this alternate version is useful to others.

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

});

这篇关于jQuery分别绑定双击和单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！