移动端踩坑指南
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) { });