解决移动端网页中滑动时不触发touchend事件

我们在使用H5做移动端开发的时候时候一般会用touch事件来替代鼠标的click事件，但是如果页面中需要进行列表滚动时，由于之前绑定了touchend事件，这样在滑动后就会自动触发thouchend事件发生跳转等操作，如何避免误操作呢，搜索相关资料后发现有解决的办法，而且非常简单粗暴。具体的做法就是绑定touch的三种事件，然后放置一个全局变量，touhcstar时设变量为false，touchmove时给全局变量为true，touchend时判断变量为真或假，为假时则触发事件，为真时返回，代码如下：

var isMoving = false;
$('#id').on('touchstart',function {
    isMoving = false;
});
$('#id').on('touchmove',function {
    isMoving = true;
});
$('#id').on('touchend', function(e) {
        if (isMoving) {
            return;
        }       
        //这里执行点击后要执行的代码        
    });

这样在滑动时就不会误触了，但是这样做带来了另一个问题，就是人手的精确性和触摸屏的精确性，稍微有一点滑动话就会判断为在滑动状态并不会执行跳转代码，要很准确了一点都不移动才会跳转，经常需要点击3到4次才会进行，很烦人，于是我对代码又进行了一点改动，就是发生touchmove移动事时候计算一下移动了多少距离，如果这个距离很微小的话，认为只是误触和手抖动，如果移动距离较大才会认为是发生了滑动，优化后的代码如下：

var isMoving = false;
var x1;
var x2;
$('#id').on('touchstart',function {
    isMoving = false;
    var _touch = e.originalEvent.targetTouches[0];
    x1= _touch.pageX;
});
$('#id').on('touchmove',function {
    var _touch = e.originalEvent.targetTouches[0];
	x2= _touch.pageX;
	if(Math.abs(x2-x1)>3){
        isMoving = true;
    ｝
});
$('#id').on('touchend', function(e) {
        if (isMoving) {
            return;
        }       
        //这里执行点击后要执行的代码        
    });

这样改完代码后，再点击就比较顺畅了，不管是滑动还是点击，都能准确的识别，非常方便。