码迷,mamicode.com
首页 > 其他好文 > 详细

防止滑动的时候触发点击事件

时间:2019-04-24 16:09:57      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:超过   cli   封装   mat   var   client   方案   事件   ons   

手机端在滑动过程中容易引发点击事件

解决方案:

重新封装一个点击函数

//防止滑动的时候触发点击事件
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);
})

  

 

防止滑动的时候触发点击事件

标签:超过   cli   封装   mat   var   client   方案   事件   ons   

原文地址:https://www.cnblogs.com/sherry-long/p/10762789.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!