A Pen by akey.

A-Pen-by-akey.markdown

A Pen by akey

A Pen by akey on CodePen.

License.

index.html

<div class="touchBox"></div>
<div class="result"></div>
<div class="result"></div>
<div class="result"></div>

script.js

$(function(){

  var $window   = $(window);
  var $box      = $('.touchBox');
  var $touchBox = $box[0];

  // touchstart
  $touchBox.addEventListener('touchstart', touchHandler, false);
  // touchmove
  $touchBox.addEventListener('touchmove', touchHandler, false);
  // touchend
  $touchBox.addEventListener('touchend', touchHandler, false);

  // Coordinates
  var startX = '', endX = '', diffX = '';
  var startY = '', endY = '', diffY = '';

  // Result
  var directionResultX = '', directionResultY = '';
  var eventResult = '';

  // Other
  var boxW = $box.width();
  var winH = $window.height();
  var ratioX = '', ratioY = '';

  function touchHandler(e) {
    e.preventDefault();
    var $result = $('.result');
    var touch   = e.touches[0];
    var htmlSrc;

    // touchstart
    if (e.type == 'touchstart') {
      startX = touch.pageX;
      startY = touch.pageY;

      htmlSrc = '<p>startX: ' + startX + ' / startY: ' + startY + ' touchstart ^^</p>';
      $result.eq(0).html(htmlSrc);
    }
    // touchmove
    if (e.type == 'touchmove') {
      endX  = touch.pageX;
      endY  = touch.pageY;

      // Coordinates are compared and substituted. 座標を比較
      diffX = startX - endX;
      diffY = startY - endY;

      ratioX = diffX / boxW * 100;
      ratioY = diffY / winH * 100;

      // 比較用正負反転
      if (ratioX < 0) ratioX = -ratioX;
      if (ratioY < 0) ratioY = -ratioY;

      htmlSrc  = '<p>endX: ' + endX + ' / endY: ' + endY + ' touchmove ^^</p>';
      htmlSrc += '<p>diffX: ' + diffX + ' / diffY: ' + diffY + ' touchmove ^^</p>';
      $result.eq(1).html(htmlSrc);

      // A transverse direction is judged. 横方向を判定
      if (diffX > 0) {
        directionResultX = 'Right ;D 右方向ですね';
      } else {
        directionResultX = 'Left ;D 左方向ですね';
      }

      // A lengthwise direction is judged. 縦方向を判定
      if (diffY > 0) {
        directionResultY = 'Above ;D 上方向ですね';
      } else {
        directionResultY = 'Below ;D 下方向ですね';
      }

      if (ratioX > 20 && ratioY < 20) {
        eventResult = 'ratioX は' + ratioX + '、ratioYは' + ratioY + 'です。フリックしています'
      } else {
        eventResult = 'ratioX は' + ratioX + '、ratioYは' + ratioY + 'です。フリックというよりスクロールです';
      }
    }

    // touchend
    if (e.type == 'touchend') {
      htmlSrc  = '<p>touchend ^^</p>';
      htmlSrc += '<p>横：' + directionResultX + '</p>';
      htmlSrc += '<p>縦：' + directionResultY + '</p>';
      htmlSrc += '<p>フリックスクロール判定結果：' + eventResult + '</p>';
      $result.eq(2).html(htmlSrc);
    }
  }

});

style.scss

@import "compass";
.touchBox {
  width: 80%;
  height: 500px;
  margin: 0 auto;
  background: #1abc9c;
}
.result {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}