移动端触屏事件

解释touch事件：是移动端的触摸事件，而且是一组事件
1.touchstart：当手指触摸屏幕的时候触发
2.touchmove：当手指在屏幕来回滑动的时候触发
3.touchend：当手指离开屏幕的时候触发
4.touchcancel：当被迫终止滑动的时候触发（来电 弹消息}

使用touch事件
    1.box.addEventListener（ “touchstart ”，function(){}）

    2.触摸事件的事件对象
    changTouches 改变后触摸点的集合 --每个时间都会记录
    targetTouches 当前元素的触摸点的集合 --当离开屏幕的时候就无法记录
    touches     页面上所有的触摸点的集合 --当离开屏幕的时候就无法记录
    属性值都是touchList--触摸点的集合

    分析滑动实现的原理
    1.让触摸的元素随着滑动位置的改变
    2.需要改变，则需要获得当前触摸的坐标 e.touches【0】.clientX
    clientX clientY  基于浏览器窗口的坐标
    pageX pageY 基于页面
    screenX screenY 基于屏幕

<div class="box"></div>
 <script>
    var box = document.querySelector('.box');
    box.addEventListener('touchstart',function(e){
        console.log('start');
        console.log(e.touches[0].clientX);
    });
    box.addEventListener('touchmove',function(e){
        console.log('move');
        console.log(e.touches[0].clientX);
    })
    box.addEventListener('touchend',function(e){
        console.log('end');
        console.log(e);
    })
 </script>