@tap是什么？和@click的区别

今天看项目代码，发现了一个很奇怪的控件@tap看起来像是点击事件，@click，那是什么新功能吗？在这里我查了很多资料，终于发现。

一、tap是什么

原来tap是zepto.js库的点击时间和click类似，zepto.js是一个比较轻量级的Jquary库，随着现在移动端的火爆越来越多的h5都支持移动端的方向。所以zepto.js是针对移动端设计的高级JS浏览器库。为什么不能用Jquary呢，是因为移动端的手机操作太多了而pc端没有的。比如说：触摸、按住和轻滑。移动端浏览器也没有pc端的双击。所以开发移动端页面就取向于用zepto.js库。

使用zepto.js也是像使用Jquary一样，需要引用文件。不过他更趋向于vue.js，喜欢把不同功能的封装到不同的模块中。这样做的好处是更轻量更瘦身。你需要哪个模块就引用哪个模块。如果你是从官网链接下载的代码，就已经包含了所有的模块。tap点击事件就是里面的一个模块。

tap事件是zepto自己封装的, 不是系统自带的，需要引入touch.js

      <!--引入zepto的移动端事件模块-->
<script src="js/touch.js"></script>

<script type="text/javascript">
$("div").tap(function () {
console.log("被点击了");
});
</script >

二、tap和click的区别

tap和click都是点击事件。不过移动端有太多复杂的功能是click监听不到的，例如，触摸、按住和轻滑。这时候就要用tap方法了。另外，click事假是点击放开之后才触发的，所以时间上会有延迟，大概200-300ms这样，可是我们在移动端的话就比较追求速度，所以就不能出现说有延迟的情况。所以用tap来代替click事件的话，对于针对移动设备的产品都适合。而且，tap还有一个特点就是『事件穿透』，就是你执行完绑定的tap事件之后呢，如果下面如果绑定了其他事件或者是本身就存在点子事件的话，也会默认触发。