WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

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

 - JavaScript/Ajax ,