移动端下单指操作大面积出发问题

在移动端开发手指单击触发touchmove

我们给对象同时添加touchstart，touchmove，touchend事件的时候（比如滑屏），当对象的子级有点击事件touchstart时，也会触发到父级的touchmove事件，这是因为我们的手指单击时，手指与屏幕的接触面积过大，就会触发到touchmove事件,因此，我们需要单独封装一个单击函数

封装tab函数

function tap(el,fn){
    var startPoint = {};
    el.addEventListener('touchstart', function(e) {
        var touch = e.changedTouches[0];
        startPoint = {
            x: touch.pageX,
            y: touch.pageY
        }
    });
    el.addEventListener('touchend', function(e) {
        var touch = e.changedTouches[0];
        var nowPoint = {
            x: touch.pageX,
            y: touch.pageY
        };
        var dis = {
            x: Math.abs(nowPoint.x - startPoint.x),
            y: Math.abs(nowPoint.y - startPoint.y)
        }
        if(dis.x < 5 && dis.y < 5){             //给一个范围值，当单击移动不超过5个像素时，认为是点击事件
            fn.call(el,e);
        }
    });
}