@tap是什么(和@click的区别)

今天看项目代码,发现了一个很奇怪的控件@tap看起来像是点击事件,@click,那是什么新功能吗?在这里我查了很多资料,终于发现。
一、tap是什么【@tap是什么(和@click的区别)】原来tap是zepto.js库的点击时间和click类似,zepto.js是一个比较轻量级的Jquary库,随着现在移动端的火爆越来越多的h5都支持移动端的方向。所以zepto.js是针对移动端设计的高级JS浏览器库。为什么不能用Jquary呢,是因为移动端的手机操作太多了而pc端没有的。比如说:触摸、按住和轻滑。移动端浏览器也没有pc端的双击。所以开发移动端页面就取向于用zepto.js库。

@tap是什么(和@click的区别)

文章图片
使用zepto.js也是像使用Jquary一样,需要引用文件。不过他更趋向于vue.js,喜欢把不同功能的封装到不同的模块中。这样做的好处是更轻量更瘦身。你需要哪个模块就引用哪个模块。如果你是从官网链接下载的代码,就已经包含了所有的模块。tap点击事件就是里面的一个模块。
tap事件是zepto自己封装的, 不是系统自带的,需要引入touch.js
< !--引入zepto的移动端事件模块--> < script src="http://www.srcmini.com/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事件之后呢,如果下面如果绑定了其他事件或者是本身就存在点子事件的话,也会默认触发。

    推荐阅读