移动端的touch事件

简单总结一下移动端的touch事件应该如何使用。

一般情况下，touch事件用于ul列表，通过手指触屏滑动来移动列表。
主要通过js中的touchstart，touchmove以及touchend事件来实现。

附上简单的左右滑动实现示例代码：

html代码：

    // 样式注意
    <style>
        .top{
            height: 7.8rem;
            width: 100%;
            overflow: hidden;   // ul的父盒子一定要设置超出部分隐藏
        }
        .top ul{
            width: 200%;   // ul的宽度要足够大，可以容纳所有的li标签内容
            height: 7.8rem;
            position: absolute;
            top: 0;
            left: 0;
        }
        .top ul li{
            float: left;   //li标签一定要浮动
        }
    </style>
    <div class="top">
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>

Js代码：

        // 要移动的ul标签
        var moveUl = document.querySelector('.top ul');
        // 手机屏幕的宽度
        var width = document.body.offsetWidth;
        // ul标签初始状态下距离屏幕左边的距离
        var leftX = 0;
        // 滑动起始值
        var startX = 0;
        // 滑动的距离
        var moveX = 0;
        moveUl.addEventListener('touchstart',function(event){
            // 记录起始值
            starX = event.touches[0].clientX;
            starY = event.touches[0].clientY;
            // 获取滑动之前ul标签距离左边的距离
            leftX = moveUl.offsetLeft;
            // 关闭过渡，让ul标签随手指滑动
            moveUl.style.transition = 'none';
        })
        moveUl.addEventListener('touchmove',function(event){
            event.preventDefault();  //阻止浏览器的默认事件
            // 计算移动的距离
            moveX = event.touches[0].clientX - starX;
            moveY = event.touches[0].clientY - starY;
            // 移动UL，移动值为滑动前距离屏幕左边的距离加上手指移动的距离
            moveUl.style.left = (moveX + leftX)+'px';
        })
        moveUl.addEventListener('touchend',function(event){
            // 滑动结束后ul距离屏幕左边的距离
            var currentLeft = moveUl.offsetLeft;
            // 如果滑动的距离大于屏幕宽度的1/6，则将ul向左或向右移动整个屏幕的宽度
            if(Math.abs(moveX) > width / 6){
                if(moveX > 0){
                    // 开启过渡，向右滑动
                    moveUl.style.transition = 'all 0.5s';
                    moveUl.style.left = '0px';
                }else{
                    // 开启过渡，向左滑动
                    moveUl.style.transition = 'all 0.5s';
                    moveUl.style.left = -width+'px';
                }
            }else{
                // 滑动距离过小，ul触屏结束后还原初始状态
                moveUl.style.transition = 'all 0.5s';
                moveUl.style.left = '0px';
            }
         })

　　注：一般情况下， 是在touchstart中添加event.preventDefault()方法，阻止浏览器的默认行为，这样的话，在手指左右滑动的时候，页面是不会上下滑动的。
　　但是，如果页面中存在click点击事件的话，会发现这样做导致了页面中的click事件无法触发。此时正确的做法是将event.preventDefault()方法，放在touchmove中，click事件就可以正常触发了。
　　如果你的页面还有上下滚动的需求，那么很有可能此时页面又不能滚动了，所以最好在touchmove中加上方向判断，可以加上下面这段代码(自己的代码，根据需要修改)：

var w = starX<0?starX*-1:starX;     //x轴的滑动值
var h = starY<0?starY*-1:starY;     //y轴的滑动值
if(w>h){                //如果是在x轴中滑动
   event.preventDefault();
}

就是在touchmove中判断x轴和y轴的移动值，判断当前是往哪个方向滑动，如果是在x轴上滑动（左右），就调用event.preventDefault()方法，如果是在y轴上滑动（上下），就不调用event.preventDefault()。