jQuery手机实现左右滑动事件

随着手机的不断发展，移动端页面已经逐渐成长起来，但对于移动端的手势事件并不是十分完善，并没有左右滑动事件。不过可以通过已存在的事件实现移动端页面的左右滑动事件。

移动端相关的事件：
touchstart：手势触碰屏幕是触发该事件；
touchmove：手指在屏幕中移动时触发该事件；
touchend：手指离开屏幕时触发该事件。

实现代码如下：

//左右滑动翻页
this.$vrTable.on('touchstart', function (e) {
    //touchstart事件
    var $tb = $(this);
    var startX = e.touches[0].clientX,//手指触碰屏幕的x坐标
        pullDeltaX = 0;
    $tb.on('touchmove', function (e) {
        //touchmove事件
        var x = e.touches[0].clientX;//手指移动后所在的坐标
        pullDeltaX = x - startX;//移动后的位移
        if (!pullDeltaX){
            return;
        }
        e.preventDefault();//阻止手机浏览器默认事件
    });
    $tb.on('touchend', function (e) {
        //touchend事件
        $tb.off('touchmove touchend');//解除touchmove和touchend事件
        //所要执行的代码
        e.stopPropagation();

        //判断移动距离是否大于30像素
        if (pullDeltaX > 30 && that.pagerNum > 1){

            //右滑，往前翻所执行的代码
        }
        //判断当前页面是否为最后一页
        else if (pullDeltaX < -30 && that.pagerNum < that.$boxToggle.find('i').length){

            //左滑，往后翻所执行的代码
        }
    });
});