移动端web，tap与click事件

Posted 2020-10-13 安慕希

一、tap与click的区别

两者都会在点击时系统自动触发，但是在手机WEB端，click会有 200~300 ms。延迟来自判断双击和长按，因为只有默认等待时间结束以确定没有后续动作发生时，才会触发click事件。所以触摸事件反应更快，体验更好。
singleTap和doubleTap 分别代表单次点击和双次点击。
tap封装了touchstart、touchmove、touchend三个事件的处理（touchstart之后如果有产生touchmove则取消此次tap事件的产生） click则只是单纯的绑定了浏览器的click事件。

二、tap事件点透问题

点击会触发非当前层的点击事件，这就是点透。例如：点击a但是同时触发了b元素的click事件，因为tap事件是通过document绑定了touchstart和touchend事件实现，$(‘.a‘)上，当touchend事件冒泡到document上以后执行$(this).hide();此时$(‘.b‘),就处在了页面的最前面，现在touchend冒泡到了document上，并且$(‘.b‘)在页面的最前面，然后就触发了click事件。

三、tap事件点透解决

1.github上有一个叫做fastclick的库，它能规避移动设备上click事件的延迟响应https://github.com/ftlabs/fastclick将它用script标签引入页面(该库支持AMD，可按照AMD规范，用require.js的模块加载器引入)，并且在dom ready时初始化在body上，如：
$(function(){
new FastClick(document.body);
})
然后给需要“无延迟点击”的元素绑定click事件（注意不再是绑定zepto的tap事件）即可。
也可以不在body上初始化它，而在某个dom上初始化，这样，只有设个dom和它的子元素才能享受"无延迟"的点击。
因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
或者有zepto或者jqm的js里面加上
$(function() {
FastClick.attach(document.body);
});
当然require的话就这样：
var FastClick = require("fastclick");
FastClick.attach(document.body, options);
实践开发中，当元素绑定fastclick后，click响应速度比tap还要快一点。
2.对于B元素本身存在默认click事件的情况，应用touchend代替tap事件并阻止掉A元素touchend的默认行为preventDefault()，从而阻止click事件的产生。
$("#aa").on("touchend", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});
对于B元素本身没有默认click事件的情况（无a标签等），应统一使用touch事件，统一代码风格，并且由于click事件在移动端的延迟要大很多，不利于用户体验，所以关于触摸事件应尽量使用touch相关事件。

延迟一定的时间(300ms+)来处理事件
$("#aa").on("tap", function (event) {
setTimeout(function(){
//很多处理比如隐藏什么的
},320);
});
这种方法其实很好，可以和fadeInIn/fadeOut等动画结合使用，可以做出过度效果

理论上上面的方法可以完美的解决tap的点透问题，如果真的倔强到不行，改用click。特别是对于遮盖浮层，由于遮盖浮层的点击即使有小延迟也是没有关系的，反而会有疑似更好的用户体验，所以这种情况，可以针对遮盖浮层自己采用click事件，这样就不会出现点透问题。

如何解决穿透：

方法一：直接将上层元素的tap事件换成click事件（会出现300ms的延迟触发事件）

方法二：在click事件触发前阻止它，如在touchend的事件中使用e.preventDefault()来阻止后续的click事件

zepto为何不使用e.preventDefault()来解决穿透问题？

因为zepto的tap事件统一是在document的touchend时触发的，若在这里使用e.preventDefault()，那页面上所有元素在touchend后触发的事件都不会被执行了。