h5在ios中點擊失效

問題1：直接給元素綁定 click 事件失效

解決：可以改成綁定 touchend 事件

問題2：綁定touchend事件，在長頁面滑動時會導(dǎo)致誤點

解決：封裝點擊方法，計算touchstart和touchend之間的時間大于300毫秒，且移動方向低于15px，即為有效點擊。

問題3:使用positoin:fixed定位會導(dǎo)致點擊失效

解決：謹(jǐn)慎使用postion：fixed定位。盡量使用positon：absolute。

//防止滑動的時候觸發(fā)點擊事件

function?tap(sprite, cb) {

????var?tapStartTime = 0,

????????tapEndTime = 0,

????????tapTime = 300,?//tap等待時間，在此事件下松開可觸發(fā)方法

????????tapStartClientX = 0,

????????tapStartClientY = 0,

????????tapEndClientX = 0,

????????tapEndClientY = 0,

????????tapScollHeight = 15,?//水平或垂直方向移動超過15px測判定為取消（根據(jù)chrome瀏覽器默認(rèn)的判斷取消點擊的移動量)

????????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) {

});