ios点击失效

h5在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) {

});

你可能感兴趣的:(ios点击失效)