tap和click事件区别

首先说下题目：clike事件和 Zepto.js 中tap的区别

　　首先介绍下Zepto：

　　最初是作为移动端开发的库，但是却可以作为JQuery轻量级的替代品，因为API和JQuery相似，而文件更小。

　　介绍下tap和click的区别：

　　两者都会在点击时触发，但是在web手机端，clikc会有200-300ms的延时，所以要用tap代替click作为点击事件，singleTap和doubleTap分别作为单次点击和双击，但是使用tap会带来点透事件（事件穿透）。

　　介绍下什么是tap事件穿透：

　　执行完上层绑定的tap事件后，下层如果绑定这click事件或者本身就存在点击事件（a/input）也会默认触发，这就是tap点透事件

　　下面正规解释下tap点透事件发生的场景：

　　当A/B两个层上下Z轴叠层，上层的A点击后消失或者移开（原因接下来会讲），当B元素本身默认有click事件或者绑定click事件，这种情况下，点击A/B重叠的部分，就会出现点透事件

　　点透现象出现的原因：

　　首先要知道tap事件是通过监听绑定document上的touch事件来模拟的，并且tap事件是冒泡到document上才触发的；

　　touchstart：在这个dom上用手触摸就能开始

　　click：在这个dom上用手触摸，且手指未曾移动，且在这个dom上手指离开屏幕，且触摸和离开时间很短（有的浏览器可能不检测时间间隔，照样可以触发click），才开始触发。

　　也就是说在移动端的事件触发从早到晚排序：touchstart touchstop click 。 所以click的触发是有延时的，about 300ms

　　由于我们在touchstart阶段就已经隐藏了A，当click被触发时，能够被点击的就是B；

　　介绍下click事件的触发规则：

　　触发当前有click的元素，且该元素面朝用户的最前端，才会触发click。

　　上面B中，由于B绑定了click或者B本身存在click，所以B也被触发了，（因为在touchstart阶段就已经隐藏了A），于是就产生了点透事件

　　介绍下解决方法：

　　1.github上有一个叫做fastclick的库https://github.com/ftlabs/fastclick

　　［javascript］ view plain

　　$（function（）{

　　newFastClick（document.body）;

　　}）

　　然后给需要的元素绑定click事件，这样就不会延时啦，据说还会比tap更快

　　2.为元素绑定touchend事件，并在内部加上e.preventDefault（）;

　　［javascript］ view plain

　　$A.on（‘touchend’，function（e）{//而touchend是原生的事件，在dom本身上就会被捕获触发

　　$demo.hide（）

　　e.preventDefault（）;

　　}）

　　监听touchend事件，阻止A元素的touchend的默认行为，从而阻止click事件的产生