JavaScript touch 事件 touchstart touchmove touchend

MDN 官方文档： https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

一、touch 事件有哪些

页面中的 touch 事件一般在移动端使用，pc 端是没有效果的。
touch 相关的事件有四个

• touchstart 触摸开始
• touchmove 触摸移动中
• touchend 触摸结束
• touchcancel 触摸取消

二、如何使用

只需要给你需要添加触摸方法的 dom 元素添加对应的事件监听即可。
具体的操作需要根据 event 中的属性来操作，后面细说。

document.addEventListener('touchstart', event => {
  console.log('touchstart')
}, false)

document.addEventListener('touchmove', event => {
  console.log('touchmove')
}, false)

document.addEventListener('touchend', event => {
  console.log('touchend')
}, false)

二、相关的对象，用到的事件属性

先来看一下事件 event 的一些属性:

在 touchstart 和 touchmove 的 event 里面都会有一个 touches 对象，这是个数组，记录了触摸的个数和对应的在页面中的位置。而在 touchend 中就没有这个 touches 对象。

看一下 touches 对象的具体属性：

所以我们在方法中就能实时获取当前触摸的位置，有了 x y 就可以做我们想做的事了。

三、实现一个触摸移动 dom 元素的实例

做一个页面，页面里面有 n 个方块，手机上拖动方块可以移动其位置。

我们需要做的：

1. body 的 position 定义为 relative，方块的 position 定义为 absolute
2. 然后给 documnet 添加那三个 touch 事件: touchstart touchmove touchend
3. 在方法内部，判断被触摸的元素是不是方块，避免把 body 也拖动了。如果是方块就拖动，如果不是就不拖动。

window.onload = () => {
   $('body').style.height = window.innerHeight + 'px';
   init();
}

function init(){
   document.addEventListener('touchstart', event => {
      console.log(event);
      let touch = event.touches[0];
      console.log('start:', touch.pageX, touch.pageY)
   }, false)

   document.addEventListener('touchmove', event => {
      // 只移动 .square dom
      if (event.target.classList.contains('square')){
         let touch = event.touches[0];
         console.log('move:', touch.pageX, touch.pageY)
         move(event.target, touch);
      }
   }, false)

   document.addEventListener('touchend', event => {
      console.log('end:')
   }, false)
}

function move(item, touch){
   let width = item.offsetWidth;
   let height = item.offsetHeight;
   item.style.left = touch.pageX - width/2 + 'px';
   item.style.top = touch.pageY - height/2 + 'px';
}

function $(selector){
   return document.querySelector(selector)
}

四、效果