移动端的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()。