var in={
// dom: 传入的dom元素让我们可以给任意的元素添加 tap事件
tap:function(dom,callback){
// 判断是否传入对象同时对应应该是一个dom元素
if(!dom || typeof dom!='object'){
return;
}
var startTime,startX,startY;
dom.addEventListener('touchstart',function(event){
// 说明不止一根手指操作
if(event.targetTouches.length>1){
return;
}
// 记录手指开始触摸的时间
startTime=Date.now();
console.log(startTime);
// 记录当前手指的坐标
startX=event.targetTouches[0].clientX;
startY=event.targetTouches[0].clientY;
})
// touchEnd; 当手指松开时候触发,意味着当前元素上已经没有手指对象了,
dom.addEventListener('touchend',function(event){
if(event.changedTouches.length>1){
return;
}
// 判断时间差异150ms
// console.log(Date.now()-startTime);
if(Date.now()-startTime>150){
return;
}
var endX=event.changedTouches[0].clientX;
var endY=event.changedTouches[0].clientY;
// 这里暂且将距离差异定位6,判断手指移动的距离在6范围之内
if(Math.abs(endX-startX)<6 && Math.abs(endY-startY)<6){
console.log('这就是移动端的单击事件--tap事件');
// 执行tap事件响应后的处理操作
callback && callback(event);
}
})
}
}
封装移动端的tap事件
最新推荐文章于 2022-05-06 01:21:09 发布