移动端web，tap与click事件

一、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事件实现，(this).hide();此时('.b')在页面的最前面，然后就触发了click事件。

三、tap事件点透解决##

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

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

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