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

input要素で選択したファイルのバイナリデータをFile APIで表示する

サンプルコード input要素で選択したファイルのバイナリデータを16進数表記でpre要素に出力します。 <input type="file"> <pre> …

no image

JavaScriptでテキストをエンコードする

UTF-8エンコード TextEncoder.prototype.encode() TextEncoderオブジェクトを生成、encodeメソッドにUSVString値を渡すと、エンコードされたUin …

no image

JavaScriptで呼び出し回数をカウントする関数Console.count

引数に任意のラベルを指定すると、ラベルごとに呼び出された回数をカウントし、現在の呼び出し回数を出力します。ラベルを省略した場合はラベルにdefaultを指定したものとして扱われます。 Console. …

no image

JavaScriptで指定時間ごとに処理を実行する

指定時間ごとに処理を実行する setInterval関数の第一引数に指定時間経過ごとに実行したいコールバック関数を、第二引数に待機時間をミリ秒で指定します。 以下の例では関数callbackFuncを …

no image

JavaScriptでMath.jsを用いて階乗の計算をする

math.permutations関数の引数に任意の数値を渡すと、その階乗の値が返されます。また、第二引数にサブセットの値を渡すと、そこまでの計算結果が返されます。 <html> < …