HTML5-9【touchstart、touchmove、touchend】

一.touchstart

(1).基础概念

click事件得300ms延迟问题,因为苹果得双击缩放判断所以会发生,所以用touch事件来解决这些问题

点下时响应

(2).事件对象

获取触发dom

 document.addEventListener('touchstart',(e)=>{
          console.log(e.target);
          },false)

e.touches触点信息  (所有手指得信息)

e.changedTouches 与当前事件相关得触点信息(事件触发后所有手指的信息)

e.targetTouches  作用在当前元素上得触点 (只记录手指在该元素上得信息)

(3).封装点击事件

(4).穿透问题

在点击后，会触发buuton || a || input得click事件

因为最上层会立即触发响应click事件

解决办法

1.如果用自己封装得则不会，因为通过preventDefault阻止了

2.或者在touchstart中设置300ms再触发函数体

 oMask.addEventListener('touchstart',()=>{
            let _self = this;
            setTimeout(()=>{
                _self.style.display = 'none'
            })
        })

3.或者再加入一个透明层

点击后透明层和遮罩层消失

4.fastclick来解决

不再使用touchstart而是用click,既可以解决穿透 也可以解决延迟

二.touchmove

移动时触发

  document.addEventListener('touchmove',(e)=>{
          console.log(e.target);
      },false)

三.touchend

松开时响应

 

  document.addEventListener('touchend',(e)=>{
          console.log(e.target);
      },false)

四.touchcancel

被打断时响应

  document.addEventListener('touchcncel',(e)=>{
          console.log(e.target);
      },false)