移动端网页布局--触摸事件

移动端网页布局

移动端浏览器兼容性较好，不需要考虑兼容性问题。

触屏事件

触屏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>

移动端拖动元素

1. touchstart、touchmove、touchend 可以实现拖动元素
2. 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0]里面的pageX 和 pageY
3. 移动端拖动的原理：手指移动中，计算出手指移动的距离，然后用盒子原来的位置+手指移动的距离
4. 手指移动的距离：手指滑动中的距离 — 手指刚开始触摸的位置

拖动元素三步骤：
（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(); //阻止屏幕滚动的默认行为
      });