[解決済み] シングルクリックとダブルクリックを区別するには?
2022-06-06 14:47:31
質問
liにボタンが1つあり、idが
"my_id"
. この要素に2つのjQueryイベントを付けました。
1.
$("#my_id").click(function() {
alert('single click');
});
2.
$("#my_id").dblclick(function() {
alert('double click');
});
しかし、毎回
single click
どのように解決するには?
最初のクリックの後、次のクリックがあるかどうかをタイムアウトで確認する必要があります。
// Author: Jacek Becela
// Source: http://gist.github.com/399624
// License: MIT
jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
return this.each(function(){
var clicks = 0, self = this;
jQuery(this).click(function(event){
clicks++;
if (clicks == 1) {
setTimeout(function(){
if(clicks == 1) {
single_click_callback.call(self, event);
} else {
double_click_callback.call(self, event);
}
clicks = 0;
}, timeout || 300);
}
});
});
}
使用方法
$("button").single_double_click(function () {
alert("Try double-clicking me!")
}, function () {
alert("Double click detected, I'm hiding")
$(this).hide()
})
<button>Click Me!</button>
EDITです。
以下のように、ネイティブの
dblclick
イベントを使用するのが望ましいです。
http://www.quirksmode.org/dom/events/click.html
または、jQueryが提供するもの。 http://api.jquery.com/dblclick/
関連
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] .prop() vs .attr()
-
[解決済み] JavaScriptで二重引用符と単一引用符はいつ使うべきですか?
-
[解決済み] jQuery Ajax呼び出し後のリダイレクトリクエストを管理する方法
-
[解決済み] jQuery/JavaScriptを使用してすべてのCSSクラスを削除するにはどうすればよいですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
fetch ネットワークリクエストラッパーの説明例
-
jsを使った簡単な照明スイッチのコード
-
Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
jQueryのコピーオブジェクトの説明
-
vueはopenlayersを使用してスカイマップとガオードマップをロードする
-
vueが定義するプライベートフィルタと基本的な使い方
-
[解決済み】Uncaught SyntaxError: JSONの位置0に予期しないトークンuがあります。
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)