1. ホーム
  2. jquery

[解決済み] Jqueryはダブルクリックとシングルクリックを別々に結合する

2023-01-19 23:15:15

質問

ダブルクリック時とシングルクリック時の挙動を区別するようなjqueryはありますか?

同じ要素に両方バインドするとシングルクリックの方だけ実行されてしまいます。

シングルクリックが実行される前に、ユーザーが再びクリックするかどうかを確認するために、しばらく待つ方法はありますか?

ありがとうございます :)

どのように解決するのですか?

John Strickler の回答は、私が期待していたものとはまったく異なることがわかりました。 2 秒間のウィンドウ内で 2 回目のクリックによってアラートがトリガーされると、その後クリックするたびに、再度クリックする前に 2 秒間待つまで、別のアラートがトリガーされます。 そのため、John のコードでは、トリプル クリックは 2 回のダブル クリックとして動作し、ダブル クリックに続くシングル クリックのように動作することを期待することになります。

私は、このように機能し、私の頭がより理解しやすい方法で流れるように、彼のソリューションを作り直しました。 私が通常の感度と感じるものをよりよくシミュレートするために、遅延を 2000 から 700 に下げました。 以下がその例です。 http://jsfiddle.net/KpCwN/4/ .

土台をありがとう、John。 この別バージョンが他の人の役に立つことを願っています。

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

});