移动端web，tap与click事件

1、tap与click的区别

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

2、tap事件点透问题

点击会触发非当前层的点击事件，这就是点透。例如：点击a可是同时触发了b元素的click事件，由于tap事件是经过document绑定了touchstart和touchend事件实现，$('.a')上，当touchend事件冒泡到document上之后执行$(this).hide();此时$('.b'),就处在了页面的最前面，如今touchend冒泡到了document上，而且$('.b')在页面的最前面，而后就触发了click事件。

3、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后触发的事件都不会被执行了。