hammer.jsを使ってブラウザで上下左右のスワイプを検知する

hammerjs.github.io

var element = document.getElementById('swipeTarget');
var hammertime = new Hammer(element);

hammertime.get('swipe').set({
  direction: Hammer.DIRECTION_ALL,
  threshold: 1,
  velocity:0.1
});
hammertime.on('swipeleft',function() {
  moveNext('left');
});
hammertime.on('swiperight',function() {
  moveNext('right');
});
hammertime.on('swipeup',function() {
  moveNext('top');
});
hammertime.on('swipedown',function() {
  moveNext('bottom');
});

こんな感じのコードになった。

注意点

• $()だと動かなかった。document.getElementByIdを使う必要がある
• direction: Hammer.DIRECTION_ALLの指定が無いと上下の検知がうまくできなかった