jQuery で クリック と ダブルクリック を 判別実行する プラグイン

0 件のコメント

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 の フォロー」 お願いします!!