[TOC] # 1.1触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前IS的兼容性问题,可以放心的使用原生JS书写效果,但是移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件) , Android和IOS都有。 touch对象代表一个触摸点。 触摸点可能是一根手指,也可能是一根触摸笔。 触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。 ## 常见的触屏事件如下: | 触屏touch事件 | 说明 | | --- | --- | | touchstart | 手指触摸到一个DOM元素时触发 | | touchmove | 手指在一个DOM元素上滑动时触发 | | touchend | 手指从一个DOM元素上移开时触发 | ~~~ // 1.获取元素 var div = document.querySelector( ' div' ); // 2.手指触摸DOM元素事件 div.addEventListener( ' touchstart'，function() { console.log('我摸了你'); }); // 3.手指在DOM元素身上移动事件 div.addEventListener( ' touchmove', function() { console.log( '我继续摸'); }); // 4.手指离开DOM元素事件 div.addEventListener( ' touchend'，function() { console.log( '轻轻的我走了'); }); </script> ~~~ # 1.2触摸事件对象( TouchEvent ) ~~~ TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多 个触点,使开发者可以检测触点的移动,触点的增加和减少,等等 touchstart、touchmove、 touchend 三个事件都会各自有事件对象。 ~~~ ## 触摸事件对象重点我们看三个常见对象列表: | 触摸列表 | 说明 | | --- | --- | | touches | 正在触摸屏幕的所有手指的一个列表 | | targetTouches | 正在触摸当前DOM元素上的手指的一个列表 | | changedTouches | 手指状态发生了改变的列表，从无到有,从有到无变化 | 因为平时我们都是给元素注册触摸事件,所以重点记住targetTocuhes  # 1.3移动端拖动元素 （需要移动的 要定位） 1.touchstart、touchmove、 touchend 可以实现拖动元素 2.但是拖动元素需要当前手指的坐标值我们可以使用targetTouches\[0\] 里面的pageX和pageY 3.移动端拖动的原理:手 指移动中,计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离 拖动元素三步曲: (1 )触摸元素touchstart :获取手指初始坐标,同时获得盒子原来的位置 (2)移动手指touchmove :计算手指的滑动距离,并且移动盒子 (3 )离开手指touchend: 注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault(); ## 画面移动 代码 ~~~ <div>< /div> <script> // (1) 触摸元素touchstart: 获取手指初始坐标，同时获得盒子原来的位置 // (2) 移动手指touchmove: 计算手指的滑动距离，并且移动盒子 // (3) 离开手指touchend: var div = document.querySelector( 'div'); var startX = 0; //获取手指初始坐标 var startY = 0; var x = 0; //获得盒子原来的位置 vary=0; div.addEventL istener( ' touchstart', function(e) { // 获取手指初始坐标 startX = e.targetTouches [0].pageX; startY = e.targetTouches[0].pageY; X = this.offsetLeft ; y = this.offsetTop; }); 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(); // 阻止屏幕滚动的默认行为 }); </script> ~~~