jqueryでタッチ系イベントを実装できるプラグイン「Hammer.js」と「TouchSwipe」

Hammer.js   A javascript library for multi touch gestures

デスクトップ用に作られたサイトやアプリをCSSやらjsを駆使して見た目だけレスポンシブ対応しても、結局動作もタッチ系のイベントに対応ってのがよくある話・・・。

そんな時に役立つプラグインを2つ。

2つとも基本的にプラグインがタッチイベントを検知してくれるので、そのイベント時にやりたいメソッドを書くだけ。

Hammer.js

今のところ知るかぎりでは一番イベント数が多い。jquery無しでも使える。

Hammer.js

  • touch
  • release
  • hold
  • tap
  • doubletap
  • dragstart
  • drag
  • dragend
  • dragleft
  • dragright
  • dragup
  • dragdown
  • swipe
  • swipeleft
  • swiperight
  • swipeup
  • swipedown
  • transformstart
  • transform
  • transformend
  • rotate
  • pinch
  • pinchin
  • pinchout
$('.hoge').on("swipeleft", function() {
console.log('swipeleft');
});

TouchSwipe

イベントは少なめだけど、指の数も検知してくれたりして使いやすい。

TouchSwipe

  • tap
  • longTap
  • doubleTap
  • swipe
  • swipeLeft
  • swipeRight
  • swipeUp
  • swipeDown
  • swipesingleTap
  • pinchIn
  • pinchOut
$('.hoge').swipe( {
swipeLeft:function(event) {
console.log('swipeLeft');
},
threshold:100
});  
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

one + one =