jQuery で クリック と ダブルクリック を別実行する プラグイン を作成しました。 通常 ダブルクリック すると、クリック 2回 と ダブルクリック が発生してうまく扱えません。 このプラグインを利用することで、クリック と ダブルクリック に対して別の処理を割り当てることが可能になります。
jquery.compositemouseevent プラグイン
jQuery plugins | Composite Mouse Event Performer(英語) |
---|---|
ダウンロード | jQuery.compositemouseevent v1.0.0 |
API ドキュメント | garafu / jquery.compositemouseevent Wiki(英語) |
デモ
try me
インストール
ダウンロードした zip ファイル中 //src/jquery.compositemouseevent.js
を、jQueryを読み込んだ後に読み込むようにします。
サンプルコード
1 2 | < script type = "text/javascript" src = "./jquery-1.9.1.js" ></ script > < script type = "text/javascript" src = "./jquery.compositemouseevent.js" ></ script > |
使い方
jQuery オブジェクトに対して拡張された .mouse
関数を以下のように利用します。
サンプルコード
1 2 3 4 5 6 7 8 | $( '#elm' ).mouse( function (event) { // クリックイベント時に呼び出されます。 // この関数はダブルクリック時には呼び出されません。 window.alert( '#elm has been clicked.' ); }, function (event) { // ダブルクリック時に呼び出されます。 window.alert( '#elm has been double clicked.' ); }); |
API ドキュメント
.mouse(onClickCallback, onDoubleclickCallback)
onClickCallback
Type: function
対象とする DOM要素 がクリックされたとき呼び出されます。
引数には jQuery.Event オブジェクトを取ります。
onDoubleclickCallback
Type: function
対象とする DOM要素 がダブルクリックされたとき呼び出されます。
引数には jQuery.Event オブジェクトを取ります。
内部的には setTimeout
を利用して、クリックとダブルクリックを判別実行しています。
その実装の都合上、クリックの反応が若干遅れることはご了承ください。。
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!