防止滑動的時候觸發點擊事件


手機端在滑動過程中容易引發點擊事件

解決方案:

重新封裝一個點擊函數

//防止滑動的時候觸發點擊事件
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(".gx_list li", function(_this) {
    var rid = _this.attr("data-i");
    console.log(rid);
})

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM