移动端浏览器兼容性较好，不需要考虑兼容性问题。
触屏事件
触屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指再一个DOM元素上滑动时触发touchend手指从一个DOM上移开时触发触摸事件对象TouchEvent
触摸列表说明touches正在触摸屏幕的所有的手指列表targetTouches正在触摸当前元素DOM 元素的手指列表changedTouches手指状态发生了改变的列表 从无到有 或者从有到无targetTouches最常用
<script> var div = document.querySelector("div"); div.addEventListener("touchstart", function () { div.style.background = "blue"; //console.log(e); //touches 正在触摸屏幕的所有的手指列表 //targetTouches 正在触摸当前元素DOM 元素的手指列表 //如果侦听的是同一个DOM元素，他们两个是一样的 //changedTouches 手指状态发生了改变的列表 从无到有 或者从有到无 console.log(e.targetTouches[0]); //e.targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息 比如 手指的坐标等 }); // 手指离开DOM元素事件 div.addEventListener("touchend",function(){ console.log(e); //当我们手指离开屏幕的时候，就没有了touches 和 targetTouches 列表 //但会有changedTouches }) </script>移动端拖动元素
touchstart、touchmove、touchend 可以实现拖动元素但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0]里面的pageX 和 pageY移动端拖动的原理：手指移动中，计算出手指移动的距离，然后用盒子原来的位置+手指移动的距离手指移动的距离：手指滑动中的距离 — 手指刚开始触摸的位置拖动元素三步骤： （1） 触摸元素 touchstart：获取手指初始坐标，同时获得盒子原来的位置 （2）移动手指 touchmove：计算手指的滑动距离，并且移动盒子 （3）离开手指 touchend：
手指移动也会触发滚动屏幕，所以这里要阻止默认的屏幕滚动 e.preventDefault（）
//拖动元素 var div = document.querySelector("div"); var startX = 0; var startY = 0; //获取手指初始坐标 var x = 0; var y = 0; //获得盒子原来的位置 //（1） 触摸元素 touchstart：获取手指初始坐标，同时获得盒子原来的位置 div.addEventListener("touchstart", function (e) { startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; x = this.offsetLeft; y = this.offsetTop; }); //（2）移动手指 touchmove：计算手指的滑动距离，并且移动盒子 div.addEventListener("touchmove", function (e) { //计算手指移动距离 ： 手指移动之后的坐标减去原来的坐标 var moveX = e.targetTouches[0].pageX - startX; var moveY = e.targetTouches[0].pageY - startY; //移动盒子 盒子原来的位置 + 手指移动的距离 this.style.left = x + moveX + "px"; this.style.top = y + moveY + "px"; e.preventDefault(); //阻止屏幕滚动的默认行为 });