H5移动端多点触控问题_移动端网页 多点触控

原理

在移动端上，触摸和鼠标事件有所不同。在多点触控时，每个手指都会触发一个touchstart事件，并且每个手指都有唯一的identifier属性，可以用来区分不同的手指，

所以

当我们想要实现多点控制那么需要记录下当前的identifier属性

// 存储当前的触摸ID
let ID:number
Dom.addEventListener("touchmove", ()=>{
    //阻止默认事件
    e.preventDefault();
    //遍历当前触发的touchList
    for (let i = 0; i < e.changedTouches.length; i++) {
      let touch = e.changedTouches[i];
      // 匹配当前触发的touch
      if (touch.identifier == ID) {
        {业务代码}
      }
    }
});

当然不要忘记在touchend事件中把ID给清除掉

Dom.removeEventListener("touchend",()=>{
    //阻止默认事件
    e.preventDefault();
    // 清除当前触摸时的ID
    ID = null;
});