移动端touch事件

touch事件是移动端特有的，pc端不支持

touchstart：开始触摸事件
touchmove：手指滑动事件（持续触发）
touchstend：触摸结束事件
touchcancal：触摸意外中断事件（手机中途来电？）

1.基本用法

var div = docuemnt.querySelector('div');
div.addEventListener('touchstart',function(){
    //只触发一次
    console.log("touchstart");
})
div.addEventListener('touchmove',function(){
    //持续触发
    console.log("touchmove");
})
div.addEventListener('touchend',function(){
    //只触发一次
    console.log("touchend");
})

 

2.touchEvent事件对象

var div = docuemnt.querySelector('div');
div.addEventListener('touchstart',function(e){
    //打印
    console.log(e.touches);
    console.log(e.targetTouches);
    console.log(e.changeTouches);
})

 

Touch 属性

事件对应的三个列表虽然名字不一样，但是它们里面装的东西都是差不多的，包含了当前事件的一些相关信息，比如：一些坐标信息。

TouchList {0: Touch, length: 1}
length:1
0:Touch
    clientX:65 // 触摸点在浏览器窗口中的横坐标
    clientY:18 // 触摸点在浏览器窗口中的纵坐标
    force:1 // 触摸点压力大小
    identifier:0 // 触摸点唯一标识（ID）
    pageX:65 // 触摸点在页面中的横坐标
    pageY:18 // 触摸点在页面中的纵坐标
    radiusX:11.5 // 触摸点椭圆的水平半径
    radiusY:11.5 // 触摸点椭圆的垂直半径
    rotationAngle:0 // 旋转角度
    screenX:560 // 触摸点在屏幕中的横坐标
    screenY:175 // 触摸点在屏幕中的纵坐标
target:div#touchLog 触摸目标
__proto__:Touch
__proto__:TouchList

https://www.cnblogs.com/cangqinglang/p/8794621.html