こんにちは、今日はWebサイトにタッチジェスチャーを実装することができるJavaScriptライブラリ、Hammer.jsの使い方についてまとめていきます。
Table of Contents
イベントの設定方法
通常のJavaScriptでイベント設定するには以下のように記述します。
swipe
1 2 3 4 | var swipe = new Hammer(document.getElementsByClassName( 'swipe' )[0]); tap.on( 'swipe' , function (ev) { console.log( 'swipe' ); }); |
pinch
1 2 3 4 | var pinch = new Hammer(document.getElementsByClassName( 'pinch' )[0]); tap.on( 'pinch' , function (ev) { console.log( 'pinch' ); }); |
tap
1 2 3 4 | var tap = new Hammer(document.getElementsByClassName( 'tap' )[0]); tap.on( 'tap' , function (ev) { console.log( 'tap' ); }); |
jQueryプラグインとして使用する場合
jQueryでイベントをバインドするメソッドのonを呼び出す前にhammer()の呼び出しを追加した形でイベントのバインドを行います。
それぞれ主なイベントのバインドは以下のようになります。
swipe
1 2 3 4 | var $swipe = $( '.swipe' ); $swipe.hammer().on( 'swipe' , function (){ console.log( "swipe" ); }); |
pinch
1 2 3 4 | var $pinch = $( '.pinch' ); $pinch.hammer().on( 'pinch' , function (){ console.log( "pinch" ); }); |
tap
1 2 3 4 | var $tap = $( '.tap' ); $tap.hammer().on( 'tap' , function (){ console.log( "tap" ); }); |