移动端滑动页面不触发点击事件

最新推荐文章于 2021-04-02 20:52:33 发布

转载最新推荐文章于 2021-04-02 20:52:33 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/1865746/blog/1575084

文章标签：

#python #javascript #前端 #ViewUI

本文介绍了一种用于防止在触摸滑动过程中触发点击事件的技术方案，并附带了具体的JavaScript实现代码。该技术对于提升用户体验和精确事件处理具有重要作用。

2019独角兽企业重金招聘Python工程师标准>>>

//tab封装(滑动时不触发点击事件)
function tap(el,fn){
var startPoint = {};
el.addEventListener('touchstart', function(e) {
startPoint = {
x: e.changedTouches[0].pageX,
y: e.changedTouches[0].pageY
};
});
el.addEventListener('touchend', function(e) {
var nowPoint = {
x: e.changedTouches[0].pageX,
y: e.changedTouches[0].pageY
};
if(Math.abs(nowPoint.x - startPoint.x) < 5
&&Math.abs(nowPoint.y - startPoint.y) < 5) {
fn&&fn.call(el,e)
}
});
}