3テラバイト

プログラム関連備忘録サイト。主にゲーム。

JavaScript

タッチジェスチャーを実装するJavaScriptライブラリHammer.jsの使い方

投稿日:

こんにちは、今日はWebサイトにタッチジェスチャーを実装することができるJavaScriptライブラリ、Hammer.jsの使い方についてまとめていきます。

イベントの設定方法

通常の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");
});

-JavaScript


comment

メールアドレスが公開されることはありません。

関連記事

no image

シンプルなレスポンシブチャートJavaScriptライブラリChartist.jsの使い方

公式サイト http://gionkunz.github.io/chartist-js/index.html GETTING STARTEDhttp://gionkunz.github.io/char …

no image

JavaScriptで位置座標を取得する

navigator.geolocation.getCurrentPosition関数で取得できます。 引数には成功時、失敗時のコールバック関数と、オプションを渡します。 <html> &l …

no image

JavaScriptでコンソールに画像を出力する

以下のurl()のカッコ内に画像のURLを指定して実行すると、コンソールにその画像を表示することができます。 console.log("%c ", ‘background: url …

no image

JavaScriptで値を素因数分解する

以下のコードでは、渡された値を素因数分解して文字列で結果を返す関数primeFactorizationを定義しています。 function primeFactorization(value) { va …

no image

ブラウザのコンソールからページ内のリンクリストを確認する

ブラウザのコンソールにdocument.linksの内容を出力すると、現在の文書内にあるリンクのリストが返され、任意の要素をクリックでそのリンクを確認することができます。 console.log(do …