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