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

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


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

関連記事

no image

JavaScriptで数値を2進数や16進数の文字列に変換する

toString関数の引数に基数の値を指定すると、その形式に変換された文字列が返されます。基数は2~36までの間で指定可能です。 16進数に変換する この例では30を16進数に変換した1eが出力されま …

no image

JavaScriptで位置座標を取得する

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

no image

JavaScriptでスタックトレースを出力する関数Console.trace

console.trace()を実行するとコンソールにスタックとレースを出力することができます。 function test1() { test2(); } function test2() { co …

no image

グリッドレイアウトを実装するJavaScriptライブラリMasonryの使い方

こんにちは、今日はWebサイトにグリッドレイアウトを実装することができるJavaScriptライブラリ、Masonryの使い方についてまとめていきます。 公式サイト https://masonry.d …

no image

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

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