移动端事件
事件类型
touchstart :触换开始(于指放在触摸屏上)touchmove :拖动(手指在触摸屏上移动)touchend :触摸结柬(手指从触摸屏上移开)touchenter：移动的手指进入一个dom元素touchleave :移动的手指高开一个dom元素。touchcancel，是在拖动中断时候触发。
touch 对应的event 对象
touches: 表示当前跟踪的触摸操作的touch对象的属性targetTouches;表示特定事件目标的Touch 对象的数组。changeTouches: 表示从上一次触摸以来，发生了改变的touch 对象的数组。
触摸位置
clientx 和clienty 属性:相对于视口的坐标:identifier: 标识触摸的唯一id;pagex和pageY: 相对于页面的坐标:screenX和screenY: 相对于屏幕的坐标:radiusx 和radiusY: 能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径和重直轴(Y轴)半径:rotationAngle :这个属性和Touch.radiusx ，Touch.radiusy 一起，描述了用户和触摸平面的接触面。force: 返回这个Touch对象对应的手指挤压触换平面的压力大小，从0.0(没有压力)到1.0(最大压力)的浮点数.target: 触摸的DOH 节点目标。
ios 手劳事件(两指触发)
gesturestart: 当一个手指已经按在屏幕上，另一个手指又触摸屏幕的时候触发。类似于touchstart 的作用样:gesturechange: 当触换屏事的任何一个手指的位置发生变化的时候触发。gestureend; 当任何一个手指从屏幕上面移开时触发。
安卓多指事件封装
多指事件封装参考
案例—滑动图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
* {
margin: 0;padding: 0;
}
body {padding: 50px;}
.outer {
height: 384px;
width: 300px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<div class="outer">
<img src="./pic.jpg" alt="" class="inner">
</div>
</body>
<script type="text/javascript">
var _outer = document.querySelector(".outer");
var _inner = document.querySelector(".inner");
_outer.addEventListener("touchstart",startHd);
_outer.addEventListener("touchmove",moveHd);
_outer.addEventListener("touchend",endHd);
var startX = 0,
moveX = 0,
nowX = 0;
function startHd(e) {
startX = e.targetTouches[0].pageX;
}
function moveHd(e) {
moveX = e.targetTouches[0].pageX;
_inner.style.transform = `translate(${moveX - startX + nowX}px,0)`;
}
function endHd(e) {
nowX = moveX - startX + nowX;
if(nowX > 0) {
nowX = 0;
_inner.style.transform = `translate(0,0)`;
}
let min = _inner.offsetWidth * -1 + _outer.offsetWidth;
if(nowX <= min) {
nowX = min;
_inner.style.transform = `translate(${min}px,0)`;
}
}
</script>
</html>