触摸事件

（同下移动端事件）

移动端兼容性比较好，我们不需要考虑以前js所提到的那些兼容性问题，可以放心使用原生js书写效果，但是移动端也有自己独特的地方，比如，触摸事件 touch，andriod 和ios都有。

touch对象代表一个触摸点，触摸点可能是一根手指也可能是一根触摸笔，触屏事件可以响应用户手指对屏幕或触控板的操作

常见的触屏事件：

touchstart 手指触摸到一个DOM元素时触发
touchmove 手指在一个DOM元素上滑动时触发
touchend 手指从一个DOM 元素上移除时触发

移动端事件只有这三个，移动端所有事件都是用这个三个事件决定的

按下去记录时间，抬起来记录一个时间，超过1s就是长按，300ms以内轻触

按下去记录手指坐标，随时记录手指坐标来知道是左滑，上滑，右滑，下滑

触摸事件对象

touchEvent 触摸事件对象描述手指在触摸平面删的状态变化，可以描述一个或多个触摸点，使开发者可以检测触点的移动，增加和减少等

触摸事件对象.touchs

正在触摸屏幕的所有手指的列表

触摸事件对象.targetTouches

正在触摸当前DOM元素上的手指的列表数组

因为我们一般都是触摸元素，经常使用的事件对象里的targettouches，可以获取到触摸元素的所有手指

通过获取数组成员的方法获取到某一个手指的指定信息

触摸事件对象.changedTouches

手指状态发生了改变的列表，从无到有，从有到无的变化

当我们手指离开屏幕时就没有了touches和targetTouches列表，但是会有changedTouches

判断上下左右滑动案例

let ksX, ksY, jsX, jsY
      document.addEventListener('touchstart', function () {
          ksX = event.touches[0].clientX
          ksY = event.touches[0].clientY
      })
      document.addEventListener('touchend', function () {
          jsX = event.changedTouches[0].clientX;
          jsY = event.changedTouches[0].clientY;
          let pdx = jsX - ksX
          let pdy = jsY - ksY
          if (Math.abs(pdx) > 50 && Math.abs(pdy) < 50) {
              if (pdx > 0) {
                  console.log('右滑');
              }
              else {
                  console.log('左滑');
              }
          }
          else if (Math.abs(pdy) > 50 && Math.abs(pdx) < 50) {
              if (pdy > 0) {
                  console.log('下滑');
              }
              else {
                  console.log('上滑');
              }
          }
          else if (Math.abs(pdx) > 50 && Math.abs(pdy) > 50) {
              console.log('瞎滑');
          }
          else {
              console.log('误触');
          }
      })

触摸事件

触摸事件

触摸事件对象

Hey!