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