移动端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