左クリック長押しでイベントを発生させる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();