jQuery でコンテンツ スライダーを自作 その2

前回、作成した jQuery Liteslider プラグインをタッチ デバイスのスワイプに対応させるため、タッチ デバイスのイベントについて調べてみたので備忘録として残しておきます。

タッチ イベント

そもそもタッチ イベントに対応しているかどうかは、windows.TouchEvent オブジェクトの有無で判断するようです。

if (window.TouchEvent) {
  /* タッチ イベントに対応している */
}else{
  /* タッチ イベントに対応していない */
}

タッチ イベントは以下のイベントがあります。

イベント 説明
touchstart タッチ開始時に発生
touchend タッチ終了時に発生
touchmove タッチ移動時に発生
touchcancel システムによる割り込み時に発生

スワイプ イベントのようなものはないので、タッチ開始とタッチ終了の位置からスワイプの移動量(方向)を取得することになります。移動量が少ない場合、タッチ操作の可能性があるので、ある程度の移動量がある場合のみスワイプと判定することになります。移動量は高解像度を考慮して 10px 以上は見たほうがいいでしょう。厳密に判定するには時間も考慮したほうがいいでしょう。

サンプル

$(#foobar).bind('touchstart', function () {
  touchStartX = event.changedTouches[0].pageX;
  touchStartY = event.changedTouches[0].pageY;
});
$(#foobar).bind('touchmove', function (e) {
  touchEndX = event.changedTouches[0].pageX;
  touchEndY = event.changedTouches[0].pageY;
});
$(#foobar).bind('touchend', function (e) {
  c = Math.sqrt(Math.pow(touchStartX - touchEndX, 2) + Math.pow(touchStartY - touchEndY, 2));
  /* 移動量が 10px 以上をスワイプとする */
  if (c >= 10) {
    /* スワイプ時の処理 */
  }
});

スワイプに対応した jQuery Liteslider はこちら

コメントを残す

メールアドレスが公開されることはありません。

日本語でコメントを入力してください。