[解決済み] 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
});
});
関連
-
[解決済み] javascript(またはjQuery)を使って::beforeや::afterなどのCSS疑似要素を選択し、操作する。
-
[解決済み] jQuery に何かを実行する前にすべての画像の読み込みを待つように指示する公式な方法
-
[解決済み] jQuery チェックボックスの変更とクリックイベント
-
[解決済み] JQueryでラジオボタンがチェックされているかどうかを調べる?
-
[解決済み] 入力にフォーカスがあるかどうかをテストするためにjQueryを使用する
-
[解決済み] ドロップダウンのアイテムの選択値をjQueryで取得する
-
[解決済み] jQueryを使用して配列から特定の値を削除する方法
-
[解決済み] jquery input select all on focus
-
[解決済み】Rails 4:ターボリンクで$(document).ready()を使用する方法
-
[解決済み] [Solved] 'touchstart'と'click'イベントをバインドして、両方に反応しないようにするにはどうしたらいいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJSで同じ要素にng-clickとng-dblclickを処理する
-
[解決済み] Microsoft JSONの日付はどのようにフォーマットするのですか?
-
[解決済み] GoogleのホストされたjQueryを使用する最良の方法、しかしGoogleの私のホストされたライブラリにフォールバックすることは失敗します。
-
[解決済み] jQuery.ajaxでmultipart/formdataを送信する。
-
[解決済み] 変更イベントでradioを使用するには?
-
[解決済み] jQueryがどのバージョンで読み込まれているかを確認するには?
-
[解決済み] チェックボックスがチェックされた場合のjQuery
-
[解決済み] GoogleのCDNからjQuery UI CSSをダウンロードする
-
[解決済み] jQueryは要素のレンダリングされた高さを取得しますか?
-
[解決済み] jQuery セレクタ。Id Ends With?