@tap和click的区别
1、不同点
- @click是Web开发中常用的点击事件指令,它是基于鼠标点击事件封装的,只能在支持鼠标点击事件的平台上使用,比如H5页面。@click事件是点击放开后才触发的,在时间上会有延迟,大概在200-300ms之间。
- @tap是uni-app独有的指令,它是基于touch事件封装的,可以在支持touch事件的所有平台上使用,包括微信小程序、支付宝小程序、App端等。@tap指令在触发点击事件时,会有300ms的延迟来判断是否存在双击事件。如果在300ms内再次点击了屏幕,就会被判断为双击事件,不会触发@tap的点击事件。而且,tap还有一个特点就是『事件穿透』,就是你执行完绑定的tap事件之后呢,如果下面如果绑定了其他事件或者是本身就存在点子事件的话,也会默认触发。
- 不过很多移动端有太多复杂的功能是click监听不到的,例如:触摸、按住和轻滑,这时就要用到了tap方法。总的来说,@tap更加适合在移动设备上使用,可以有效地避免因双击事件导致的误操作。而@click则适用于Web开发,不需要考虑双击事件的问题,能够提供更加流畅的用户体验。
2、相同点
@tap和@click都是用来绑定点击事件的指令。
3、在HbuilderX中的使用
3.1相同点
@tap和@click两者都是点击时触发事件
3.2不同点
- @click是组件被点击时触发,会有200-300ms的延迟(内置处理优化了) ;
- @tap是手指触摸离开时触发,没有200-300ms的延迟,但是会有事件穿透
- 编译到小程序端,@click会被转换成@tap;
4、其他
如何使用@tap.stop阻止事件继续传播 @tap.stop="事件名”不能只在当前标签添加也需要在外层标签同样使用@tap.stop="事件名"
使用uniapp开发小程序的时候,@click.stop来做事件冒泡没有作用,需要把@click.stop改成@tap.stop就可以实现了。
使用uniapp开发APP的时候,@click.stop来做事件冒泡可以使用的。
@click.stop:指的是阻止父组件(节点)的事件冒泡