移动端踩坑指南

1. ios点击

问题1：直接给元素绑定 click 事件失效

解决：可以改成绑定 touchend 事件

问题2：绑定touchend事件，在长页面滑动时会导致误点
解决：封装点击方法，计算touchstart和touchend之间的时间大于300毫秒，且移动方向低于15px，即为有效点击。

问题3:使用positoin:fixed定位会导致点击失效

解决：谨慎使用postion：fixed定位。尽量使用positon：absolute。

//防止滑动的时候触发点击事件
function tap(sprite, cb) {
    var tapStartTime = 0,
        tapEndTime = 0,
        tapTime = 300, //tap等待时间，在此事件下松开可触发方法
        tapStartClientX = 0,
        tapStartClientY = 0,
        tapEndClientX = 0,
        tapEndClientY = 0,
        tapScollHeight = 15, //水平或垂直方向移动超过15px测判定为取消（根据chrome浏览器默认的判断取消点击的移动量)
        cancleClick = false;
    $(document).on('touchstart', sprite, function() {
        tapStartTime = event.timeStamp;
        var touch = event.changedTouches[0];
        tapStartClientX = touch.clientX;
        tapStartClientY = touch.clientY;
        cancleClick = false;
    })
    $(document).on('touchmove', sprite, function() {
        var touch = event.changedTouches[0];
        tapEndClientX = touch.clientX;
        tapEndClientY = touch.clientY;
        if ((Math.abs(tapEndClientX - tapStartClientX) > tapScollHeight) || (Math.abs(tapEndClientY - tapStartClientY) > tapScollHeight)) {
            cancleClick = true;
        }
    })
    $(document).on('touchend', sprite, function() {
        var _this = $(this);
        tapEndTime = event.timeStamp;
        if (!cancleClick && (tapEndTime - tapStartTime) <= tapTime) {
            cb(_this);
        }
    })
}
//绑定事件
tap(".target", function(_this) {

});