[JS]スマートフォンのタッチイベントを取得する各スクリプトのまとめ(仕様比較)

タッチイベントを取得する各スクリプトの対応イベント、スタンドアローンなのかjQueryが必要なのか、ファイルの容量など、仕様の比較をまじえて紹介します。

サイトのキャプチャ

QUOjs

イベント
タッチ、タップ、ダブルタップ、ホールド、フィンガー、スワイプ、スワイプアップ、スワイプライト、スワイプダウン、スワイプレフト、ドラッグ
補足
jQueryとのコンフリクトを避けるため、「$$」を使用。
対応予定(2フィンガータップ、ロウテイト、ピンチアウト、ピンチ)
仕様
スタンドアローン
ファイルサイズ
Minified: 13KB
サイトのキャプチャ

Hammer.js

イベント
タップ、ダブルタップ、ホールド、ドラッグ、ピンチ
補足
タッチジェスチャだけにフォーカスしたスクリプト。
仕様
スタンドアローン
jQueryのプラグインも有り
ファイルサイズ
Minified: 2KB

サイトのキャプチャ

jGestures

イベント
オリエンテーションの変更、ピンチ、ロウテイト、スワイプムーブ、スワイプ(4方向)、スワイプ(1, 2, 3本指)、タップ(1, 2, 3本指)、ピンチオープン、ピンチクローズ、シェイク
補足
数多くのジェスチャとイベントに対応。
仕様
jQueryのプラグイン
ファイルサイズ
Minified: 16KB
サイトのキャプチャ

Touchy

イベント
長押し、ドラッグ、ピンチ、ロウテイト、スワイプ
仕様
jQueryのプラグイン
ファイルサイズ
Minified: 9.52KB
サイトのキャプチャ

DoubleTap

イベント
タッチ、スワイプ、タップ、ダブルタップ、スワイプレフト、スワイプライト、スワイプアップ、スワイプアップ
補足
iPad, iPhone, iPodのみサポート(Androidサポート予定)
仕様
jQueryのプラグイン
ファイルサイズ
3.4KB
サイトのキャプチャ

touchSwipe

イベント
スワイプ(4方向)、タッチイベント(1, 2本指)
補足
イベントのトリガーは、start, move, end, cancel。
スワイプしながらのページスクロールにも対応。
仕様
jQueryのプラグイン
ファイルサイズ
23.5KB

サイトのキャプチャ

Touchable

イベント
タップ、ロングタップ、ダブルタップ、タッチャブルムーブ、タッチの終了
補足
タッチイベントをデスクトップ(IE7/8対応)のマウスイベントと一元管理。
仕様
jQueryのプラグイン
ファイルサイズ
2KB
サイトのキャプチャ

thumbs.js

イベント
タッチスタート、タッチエンド、タッチムーブ、マウスダウン、マウスアップ、マウスムーブ
補足
タッチレスデバイスもサポートしているため、デスクトップでのデバッグ可。
スマートフォン向けフレームワーク「PhoneGap」に対応。
仕様
スタンドアローン
ファイルサイズ
Minified: 612Bytes
サイトのキャプチャ

Pep

イベント
ドラッグ
補足
スマートフォン・デスクトップ対応。
CSS3アニメーションを使った慣性ドラッグ。
仕様
jQueryのプラグイン
ファイルサイズ
16KB
サイトのキャプチャ

Jester

イベント
スワイプ、フリック、タップ、ダブルタップ、ピンチ
補足
iPad, iPhone上でDOMエレメント上のジェスチャを認知。
仕様
スタンドアローン
ファイルサイズ
25KB

via:
11 Multi-touch and Touch events Javascript libraries

top of page

©2017 coliss