JavaScript --------WebS APIs学习之移动端网页特效（触屏事件）

触屏事件

1.1触屏事件概述

             移动端浏览器兼容性好，不需要考虑js的兼容性问题，但移动端有自己独特的地方，比如触屏事件touch（也称触摸事件）

Android和IOS都有。

          touch对象代表一个触摸点，触摸点可能是一直手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

常见的触屏事件如下：

               

1.2 触摸事件对象（TouchEvent）

            TouchEvent 是一类描述手指在触摸平面（触摸屏，触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。

           touchstart ,touchmove , touchend 三个事件都会各自有事件对象

         

         最常使用  targetTouches

1.3移动端拖动元素

     1.touchstart ,touchmove , touchend 可以实现拖动元素

      2.但是拖动元素需要当前手指的坐标值，可以使用targetTouches[0] 里面的pageX 和pageY

      3.移动端拖动的原理： 手指移动中，计算手指移动的距离。然后用盒子原来的位置+手指移动的距离

      4.手指移动的距离：手指滑动中的位置 - 手指刚开始触摸的位置

      拖动元素三步曲：

         （1） 触摸元素touchstart ：获取手指初始坐标 ，同时获得盒子原来的位置

         （2）移动手指 touchmove： 计算手指的滑动距离，并且移动盒子

         （3）离开手指touchend；

            注意：手指移动也会触发滚动屏幕所以要阻止默认的屏幕滚动e.preventDefault();