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ライブラリMasonryの使い方

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

no image

JavaScriptでブラウザ履歴の前のページや次のページへ移動する

前のページへ window.history.back() 次のページへ window.history.forward() 指定ページ数前へ window.history.go関数の引数にマイナスの数値 …

no image

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

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

no image

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

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

no image

画像のExif情報を読み込むJavaScriptライブラリExif.jsの使い方

Exif.jshttps://github.com/exif-js/exif-js 使い方 ここではローカルサーバーに配置したHTMLファイルから使用します。fileプロトコルでアクセスしている場合は …