スワイプ直後のタップ禁止

主にiOSでスワイプの慣性が終わりきらないうちに、
スワイプ前にボタンがあった位置を再度タップすると、
ボタンが反応してしまうというバグの対策。

スワイプ直後に要素を押せないようにするために、
y方向に30px以上スワイプした場合、
500msの間ダミーの要素を全体にかぶせるというコード。

デモ：http://codepen.io/mo4_9/pen/JWywYy

banTapJustAfterSwipe.js

import $ from 'jquery';

// スワイプ直後のタップ禁止
export function banTapJustAfterSwipe() {

  let touchStartX, touchStartY,
      touchMoveX, touchMoveY;
  let moveDistY = 0;

  let timer;
  let isMoving = false;

  const $cover = $('.swipe--cover');
  $cover.hide()

  window.addEventListener("touchstart", (event) => {
    touchStartX = event.touches[0].pageX;
    touchStartY = event.touches[0].pageY;
    // console.log("touchstart");
  }, true);

  window.addEventListener("touchmove", (event) => {
    touchMoveX = event.changedTouches[0].pageX;
    touchMoveY = event.changedTouches[0].pageY;
    // console.log("touchmove");
    isMoving = true;
  }, true);

  window.addEventListener("touchend", (event) => {
    // console.log("touchend", isMoving, touchStartY, touchMoveY, moveDistY);
    // タップの場合（touchmoveが発火しない）
    // touchendが発火してからも慣性がかかり進んでしまうのを調整
    if (!isMoving) touchMoveY = touchStartY;
    moveDistY = Math.abs(touchStartY - touchMoveY);
    if (moveDistY > 30) {
      $cover.show();
      clearTimeout(timer);
      timer = setTimeout(() => {
        $cover.hide();
      }, 500);
    }
    isMoving = false;
  }, true);

}

参考
【JavaScript】スマホやタブレットでのスワイプ・フリック動作を取得する方法