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

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

タッチ イベント

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

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

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

スワイプ イベントのようなものはないので、タッチ開始とタッチ終了の位置からスワイプの移動量（方向）を取得することになります。移動量が少ない場合、タッチ操作の可能性があるので、ある程度の移動量がある場合のみスワイプと判定することになります。移動量は高解像度を考慮して 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 はこちら