Blog

マウスとタッチのイベントはHammer.jsが便利

2015.12.02Cat:javascript デザイナー
nino-eye

最近ではPC、スマホの両方に対応したレスポンシブのサイトがほとんど当たり前のようになってきています。

サイトを作るときに、スマホのアプリのような操作性を求められることも増えて消えいます。

そういったとき、JavaScriptで大変になってくるのがマウスとタッチのイベントによる操作です。

 

私の場合、今まではjQueryによってイベントを取得し、

PCとタッチデバイスでイベントを振り分けて・・・といった方法を使っていましたが、

HTMLの要素が入り組んでいる場合、振り分けが煩雑になり、操作しきれなくなる場合がありました。

 

さらに、IEでは10,11で、タッチに対応していますが、

他のブラウザで標準化されているtoucheventではなく、pointerという独自のイベントを扱う必要があり、

その振り分けも別で必要になります。

 

こういった問題を全て解決してくれるのが、今回ご紹介するHammer.jsです。

Hammer.jsでは、デバイスやブラウザを選ばず、

タッチのイベントとしてひとまとめにして、イベントを扱うことができるようになります。

 

↓こちらはHammer.jsを使ったデモです

DEMO

※2015.12.04追記
IE、Edge、Androidだとタップの感度があまり良くないようです・・・

 

使い方

  1. Hammer.jsをダウンロード、設置し、読み込む
  2. Hammer.jsの初期設定
  3. Hammer.jsの各イベントの操作

 

1. Hammer.jsをダウンロード、設置し、読み込む

Hammer.JS – Hammer.js

↑こちらの公式サイトの「Hammer.min.js」というところをクリックしてダウンロードします。

ダウンロードしたら、HTMLで以下のように読み込みます。

 

2. Hammer.jsの初期設定

読み込めたら、JavaScriptを記述します。

まずはクリック&タッチの対象となる要素をID指定し、Hammer.jsのオブジェクトを読み込みます。

今回はより使いやすくするため、jQueryも合わせて使っていますが、jQueryを読み込まなくても使うことはできます。

 

3. Hammer.jsの各イベントの操作

パン(ドラッグ)

 

ピンチ(タッチデバイスのみ)

 

タップ(クリック)

 

スワイプ(タッチデバイスのみ)

 

細かなイベントの情報は、DEMOを参考にしていただければと思います。

是非ご利用下さい。

 

公式のDocument

Getting Started – Hammer.js

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ