movii
7/7/2017 - 3:56 PM

笔记：移动端 touch 事件 - 模拟 swipe 的实现 - 1. 判定为 swipe 事件的伪代码 Raw

笔记：移动端 touch 事件 - 模拟 swipe 的实现 - 1. 判定为 swipe 事件的伪代码 Raw

index.js
content_copyfile_download
// 用于记录触摸点开始接触屏幕，和离开屏幕的缓存
let startPos = {x: 0, y: 0}
  , endPos = {x: 0, y: 0};

// 记录手指接触到屏幕上时，触摸点的位置
layer.addEventListener('touchstart', function (e) {
  startPos = {x: e.changeTouches[0].pageX, y:  e.changeTouches[0].pageY};
});

// 手指在屏幕上移动时，持续记录，
// 离开之前记录下的最一个 move 信息，即为离开时的触摸点的位置
layer.addEventListener('touchmove', function (e) {
  endPos = {x: e.changeTouches[0].pageX, y:  e.changeTouches[0].pageY};
});

layer.addEventListener('touchend', function (e) {
  // x、y 轴的位移绝对值
  let disX = Math.abs(endPos.x - startPos.x)
    , disY = Math.abs(endPos.y - startPos.y);
  
  // x、y 轴的位移绝对值任何一个超过 30 像素的移动，判定为 swipe
  if (Math.max(disX, disY) > 30) {
    // 做剩余对 swipe 方向的判断
    // ...
  }  
});