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

D3.jsベースのJavaScriptチャートライブラリC3.jsの使い方

公式サイト https://c3js.org/ サンプルコード Getting Startedページのサンプルを動かしてみます。https://c3js.org/gettingstarted.html …

no image

ブラウザとモバイルデバイス用のインタラクティブチャートを実装するJavaScriptチャートライブラリGoogle Chartsの使い方

公式サイト https://developers.google.com/chart サンプルコード <html> <head> <script type="te …

no image

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

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

no image

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

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

no image

File APIでinput要素で選択したファイルの情報を確認する

サンプル <input type="file"> <script> const input = document.querySelector(‘input’ …