tap 和click 事件区别
来源:互联网 发布:淘宝88会员是什么意思 编辑:程序博客网 时间:2024/05/20 06:22
之前考三七互娱时遇到的问题,今天回顾记录下。
首先说下题目: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
$(function(){ newFastClick(document.body);})
然后给需要的元素绑定click事件,这样就不会延时啦,据说还会比tap更快
2.为元素绑定touchend事件,并在内部加上e.preventDefault();
$A.on('touchend',function(e){//而touchend是原生的事件,在dom本身上就会被捕获触发 $demo.hide() e.preventDefault();})监听touchend事件,阻止A元素的touchend的默认行为,从而阻止click事件的产生
- tap 和click 事件区别
- tap 和click 事件区别
- tap,touch,touchstart事件与click事件的区别
- touch事件,tap,click,press,slide,swipe
- 移动端-click、touch、tap、swipe事件
- IOS微信中点击事件会闪的问题-tap click区别
- js中的click和onclick事件区别
- onclick 事件 和click()的区别
- UITextFieldDelegate和tap事件
- 移动端click时间、touch事件、tap事件详解
- 移动端click时间、touch事件、tap事件详解
- 手机web开发,click,touch,tap事件浅析
- 移动端WEB开发,click,touch,tap事件浅析
- 移动端WEB开发,click,touch,tap事件浅析
- 移动端WEB开发,click,touch,tap事件浅析
- WEB移动端的click ,tap ,touchend事件的对比
- 移动端WEB开发,click,touch,tap事件浅析
- 移动端WEB开发,click,touch,tap事件
- 13、数据结构笔记之十三栈的应用之栈与递归之斐波那契数列
- JS面试常见算法题
- 操作系统--并发与并行
- 算法:一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少?
- javax.mail.AuthenticationFailedException: 535 Error: authentication failed
- tap 和click 事件区别
- 双缓冲技术绘图原理及简单的VC实现
- flask_sqlalchemy
- 通过xstart启动gnome桌面 连接时报错:Can't open display: localhost:10.0
- 已解决:maven,SSM项目的spring-mvc.xm文件引用类爆红:The fully qualified name of the bean's class, except if it serv
- EasyPlayerPro(Windows)开发之ffmpeg log输出报错
- 大O表示法及旅行者问题
- 文档即编码(三):信息树(二)
- P--游(tour)