tap和click的区别和用法

 

看别人的代码发现有一个点击事件是@tap触发的,和@click类似,于是我总结了一下两者的特点和用法。

一、tap是什么?特性是什么

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

img

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

例如:


 <!--引入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事件之后呢,如果下面如果绑定了其他事件或者是本身就存在点子事件的话,也会默认触发。

推荐阅读:

本文为博主原创文章,知识共享,开源精神,转载注明出处。