jQueryプラグイン Mousehold.jsをリニューアル

以前にマウスボタンの長押しに対応したjQueryプラグイン、Mousehold.jsというものを紹介しましたが、今回、これまた以前に書いたjQueryプラグインの作成法で用いた方法で書き直しすることにしました。ただし、機能面で特に加わるものはありません。違うところはECMAScript5のアクセサディスクリプタを利用して、プラグインに階層構造を持たせたところです。

この違いはプラグインの呼び出し方に現れます。例として、以前のプラグインは次のように呼び出します。

var button1 = $('#button-1');

var callback = function (e) { console.log('長押しイベント発生しました！'); };

var option = { timeout: 500 };

button1.addMouseHold(callback, option);

そして今回書き換えたES5バージョンですが、イベント登録の方法が2種類あって、

button1.mousehold(callback, option);

または、add()メソッドにつなげて

button1.mousehold.add(callback, option);

このようにプラグインを呼び出します。

このとき.mouseholdはそれ単体がメソッドとして振る舞い、さらにadd()などのメソッド群をまとめる名前空間にもなります。また、前のプラグインの場合、プラグイン機能を削除するのに.removeMouseHold()という別のメソッド名を使用していましたが、ES5バージョンは.mousehold.remove()という書き方に変更され、jQueryプラグイン間の名前の衝突が起きづらくなっています。また、これらは戻り値にjQueryオブジェクトを返すので、メソッドチェーンが途切れることもありません。

なお、ES5バージョンはスマホやタブレットのタッチイベントに対応可能です（機種により不可な場合があります）。ただし、これらの携帯端末は画面をタッチ長押ししたとき、デフォルトで文字列セレクトとポップアップが発生する場合があります。幸いこれらはCSSで制御することができます。イベントを割り当てる要素に対して、次のようなCSSプロパティを指定してください。

/* クラス名は任意でかまいません */
.unselectable {
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

詳しい使用法はコード内にも記載されています。ライセンスフリーです。
jQuery Mousehold.js ver 1.0

 - JavaScript/Ajax jQuery, jQueryプラグイン, mousehold.js, マウス長押し