一、touch事件的分类
1.1 触摸事件(touch)
.box {width: 150px;height: 150px;background-color: red;margin: 20px auto;}
<div id="box" class="box"></div>
<script>var boxEl = document.getElementById('box');// boxEl.ontouchstart = handleStart; 触摸开始// boxEl.ontouchmove = handleMove; 触摸移动// boxEl.ontouchend = handleEnd; 触摸结束// boxEl.ontouchcancel = handleCancel; 触摸中断boxEl.addEventListener('touchstart', handleStart, false);boxEl.addEventListener('touchmove', handleMove, false);boxEl.addEventListener('touchend', handleEnd, false);function handleStart() {console.log('touchstart');}function handleMove() {console.log('touchmove');}function handleEnd() {console.log('touchend');}</script>
注意：
touchstart：一定是手指摁在物体上才能触发touchmove、touchend：手指移出来后也能触发触发顺序一定先是touchstart，然后才有可能触发touchmove，最后才触发touchend
pointer事件
1.2 手势(gesture)事件
1.3 传感器(sensor)事件
二、touch事件的event对象
touches--所有的触摸点（所有的手指信息）targetTouches--目标触摸点（手指在目标物体上的信息，比如有几根...）changedTouches--发生变化的触摸点(发生变化的手指信息，比如几根手指发生了变化)示例：
body {height: 2000px;}.box {width: 150px;height: 150px;background-color: red;margin: 20px auto;}
<div id="box" class="box"></div>
var boxEl = document.getElementById('box');boxEl.addEventListener('touchstart', handleStart, false);boxEl.addEventListener('touchmove', handleMove, false);boxEl.addEventListener('touchend', handleEnd, false);function handleStart(ev) {console.log('touchstart', ev);// console.log(ev.touches, ev.targetTouches, ev.changedTouches);var touch = ev.changedTouches[0]; //单指console.log(touch);console.log(touch.pageX, touch.pageY); //加上滚动条的距离}function handleMove(ev) {console.log('touchmove');}function handleEnd(ev) {console.log('touchend', ev);// console.log(ev.touches, ev.targetTouches, ev.changedTouches);}
三、其他触摸事件
单击时触发：tap
双击时触发：doubletap
摁住不松手时触发：press
快速左/右滑时触发：swipe
拖动时触发：pan
双指收缩时触发：pinch
多指滑动时触发：rotate
img {width: 100%;}
<img id="box" src="img/touchEvent.png" alt="touchEvent">
<script src="js/hammer.min.js"></script><script>var boxEl = document.getElementById('box');var hammertime = new Hammer(boxEl);//on() 方法在被选元素及子元素上添加一个或多个事件处理程序//在on()方法中可以加上多种要执行的事件hammertime.on('pan swipe tap doubletap press pinch rotate', function(ev) {console.log(ev.type);});</script>
touch事件之单指拖动小案例：
body {height: 2000px;}.backtop {/* 固定定位 */position: fixed;right: 20px;bottom: 20px;width: 45px;height: 45px;line-height: 45px;text-align: center;background-color: rgba(0, 0, 0, 0.6);border-radius: 50%;color: #fff;font-size: 30px;/* 去除高亮 */-webkit-tap-highlight-color: transparent;/*transform: translate3d(x, y, 0); 会开启GPU加速，从而提高效率即动画的性能较高*/}
<a href="#" id="backtop" class="backtop">↑</a>
<script>function drag(el, options) {// 判断x和y是否在外面传值，如果传值就使用传入的options.x和options.y，否则就使用默认值options.x = typeof options.x !== 'undefined' ? options.x : true;options.y = typeof options.y !== 'undefined' ? options.y : false;//如果禁止了x和y轴的拖动，也就没有必要再向下进行了，就在此返回if (!options.x && !options.y) return;//记录当前的坐标，起到实时更新作用var curPoint = {x: 0,y: 0};//记录手指头刚刚摁下时的坐标var startPoint = {};//var isTouchMove = false;//绑定事件el.addEventListener('touchstart', handleStart, false);el.addEventListener('touchmove', handleMove, false);el.addEventListener('touchend', handleEnd, false);function handleStart(ev) {//获取手指var touch = ev.changedTouches[0];//记录刚开始的x和y的坐标startPoint.x = touch.pageX;startPoint.y = touch.pageY;}function handleMove(ev) {// 阻止滚动条的默认行为ev.preventDefault();isTouchMove = true;//获取手指var touch = ev.changedTouches[0];//记录和刚开始的x和y坐标之差var diffPoint = {};//记录x和y分别到底移动了多少距离，便于传递给move()函数var movePoint = {x: 0,y: 0};// 计算差值diffPoint.x = touch.pageX - startPoint.x;diffPoint.y = touch.pageY - startPoint.y;// 如果允许x和y轴拖动if (options.x) {movePoint.x = diffPoint.x + curPoint.x;}if (options.y) {movePoint.y = diffPoint.y + curPoint.y;}// 调用move(el, movePoint.x, movePoint.y);}function handleEnd(ev) {// 如果没有移动if (!isTouchMove) return;var touch = ev.changedTouches[0];// 更新当前坐标curPoint.x += touch.pageX - startPoint.x;curPoint.y += touch.pageY - startPoint.y;isTouchMove = false;}function move(el, x, y) {x = x || 0;y = y || 0;el.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';}}</script><script>var backtop = document.getElementById('backtop');drag(backtop, {x: true,y: true// y: true});</script>
