JavaScriptだけでスワイプ処理追加

ここに結果を表示

HTML

<p id="result">ここに結果を表示</p>
<div id="t">
  swipe (#t)
</div>
<hr>
<div class="foo">
  <div class="bar">
    swipe (.foo .bar)
  </div>
</div>

CSS

#t, .foo .bar {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background: cyan;
}

JavaScript

function setSwipe(elem) {
  var t = document.querySelector(elem);
  var r = document.getElementById('result');
  var startX;
  var startY;
  var moveX;
  var moveY;
  var dist = 30;
  t.addEventListener('touchstart', function(e) {
    e.preventDefault();
    startX = e.touches[0].pageX;
    startY = e.touches[0].pageY;
  });
  t.addEventListener('touchmove', function(e) {
    e.preventDefault();
    moveX = e.changedTouches[0].pageX;
    moveY = e.changedTouches[0].pageY;
  });
  t.addEventListener('touchend', function(e) {
    if (startX > moveX && startX > moveX + dist) {
      r.textContent = '右から左にスワイプ';
    } else if (startX < moveX && startX + dist < moveX) {
      r.textContent = '左から右にスワイプ';
    }
  });
}
setSwipe('#t');
setSwipe('.foo .bar');