左クリック長押しでイベントを発生させるjQueryプラグイン
2016/12/24
追記:jQuery Mousehold.jsのリニューアルバージョンを公開しました。こちらもご覧ください。 jQuery Mousehold.js ECMAScript5バージョン
jQuery MouseHold.js ⇒jQuery MouseHold.js
概要説明
jQuery MouseHold.js
このスクリプトはjQueryプラグインです。バージョン1.7以上で動作します。
あるHTML要素(ボタンやリンクなど)にマウスカーソルを乗せた状態で、左クリックボタンを一定時間以上長押しするとタイマーが起動してコールバック関数が呼び出されます
オプションとして長押し時間(duration:ミリ秒単位)とコールバック関数のthisキーワードをバインドするオブジェクト(bindObject:バインドするオブジェクト)を指定できます
左クリックボタンを押しているあいだにカーソルを別の要素へ移動したり、一定時間経つ前にボタンを離すとタイマーが解除されます
使用方法
//addMouseHoldメソッドでコールバック関数を登録
$('#hoge').addMouseHold(function () {
console.log('#hogeを長押ししました。');
});
//addMouseHoldメソッドの第2引数にオプションを指定可能
$('#fuga').addMouseHold(function () {
console.log('#fugaを1秒間押し続けました。', 'thisキーワードは' + this +'です。');
},
{
bindObject: fugaObj,
duration: 1000
});
//長押しイベントハンドラを解除したいときはremoveMouseHoldメソッドを実行する
$('#hoge').removeMouseHold();
