什么是tap事件
在手机上弄app，你肯定见过tap这个词？它其实就是一种轻轻点击的手势，就像电脑键盘上的click事件在手机游戏中的替代品。比起那些有300ms延迟的click事件，tap事件能立马反应你的动作，让用起来更舒服。它实际上是用触摸事件冒充出来的，包括摸一下(touchstart)、挪动一下(touchmove)和结束摸一下(touchend)这些步骤，最后在结束摸一下的那刻让对应的回调函数跑起来。
tap事件的意义
手机上的浏览器为了适应双击放大页面的操作，在点击的时候故意放慢了反应速度，等300秒才能确定你要做两次点击操作还是只是单次单击。但是“轻触”事件能模仿触摸行为，避开那个延迟，让你用得更顺手。有了这种功能，浏览器就能更准确地探测到你的点击动作，让页面反应更快！
tap事件的实现原理
d开发时，用JavaScript能轻松监听到触摸开始、移动和结束这些动作，然后利用一些小技巧就能模拟成击打（tap）效果。你就可以在触摸开始的时候记录手指点的地方，然后到触摸结束时看看是否达到预期的点击条件，再顺手完成想做的事。搞个简单的西瓜例子吧：
javascript 当我摸到元素的时候，它就会触发这个函数。//定义tap函数，传入需要绑定的元素，和一个回调函数 function tap(el,callBack){ var startTime = 0; var maxTime = 250; var [startX,startY,endX,endY] = [0,0,0,0]; //es6解构赋值 el.addEventListener('touchstart',function(e){ console.log('touchstart'); startTime = Date.now(); //开始触摸的事件 startX = e.touches[0].clientX; //手指在浏览器横坐标 startY = e.touches[0].clientY; //手指在浏览器纵坐标 }) el.addEventListener('touchmove',function(e){ console.log('touchmove'); endX = e.touches[0].clientX; //手指在浏览器横坐标 endY = e.touches[0].clientY; //手指在浏览器纵坐标 }) el.addEventListener('touchend',function(e){ console.log('touchend'); if( (Date.now()-startTime) > maxTime){ //如果超过了最大时间，不触发tap console.log('超时了'); return ; } //如果移动距离过大，则不是tap事件。为了大家在电脑上能看到效果，这里设置成了1000，因为在电脑上移动幅度不好控制。如果是在移动端，设置为30就差不多了。 if(Math.abs(endX-startX) > 1000 || Math.abs(endY-startY) > 1000){ return; } callBack(e); }) } tap(document.documentElement,function(e){ console.log(e); });//处理 touchstart 逻辑
});
点哪里，就给你记录下来
//处理 touchmove 逻辑
这个元素绑定了个'touchend'事件，点击完了执行下面的代码。
//处理 touchend 逻辑
if (符合tap条件){
//执行回调函数
}
为什么会出现tap点透
咱们做手机上的开发容易碰到一种现象，叫“tap点透”。就是你在哪个元素上设了以点击事件为主导的功能，但上面还有个遮挡物体，然后在你点击那个遮挡物之后，底层的元素却错误地也跟着触发了点击。这个问题在于，在手机屏幕上，点击顺序是这样的：先触碰（touchstart），再滑动（touchemove），最后离开（touchend）和点击（click）。而当你的手指已经越过了掩盖物，直接敲击到底下的元素时，它也就自动触发了所谓的点击操作。
解决tap点透问题的方法
手机网站统一使用tap或click，别乱选；
让遮罩慢慢消失：让遮罩等上至少300毫秒再走，免得挡住底下的点击。
装个fastclick库吧：这能瘦身移动端浏览器的buffer区，让你点得更快！
盖上遮罩（不想做）：这下好了有点透的问题，但是显得不够给力还影响观众心情。
如何选择合适的解决方案
遇到tap点透问题时，得针对实际情况选好应对招数！已经套用了像库或框架那样的破解办法的话就别折腾，否则就自己根据情况和项目特种找最完美的解决法子。
总结
通过研究tap事件和点透原理，咱们能深入了解手机上点击的小窍门，应对各种看似棘手的问题也就能游刃有余了。运用好用的tap事件和找对方法，就能让APP用起来更舒服，避免那些烦人的BUG。
希望这个小提示能帮到你！有啥关于手机点拨互动你想问的或者想深入了解的吗？大家可以在评论区交流哈。
评论0