Zepto tap 穿透bug
当两个层重叠在一起时,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必“穿透”,“google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,解决方案:
1.使用github上有一个叫做fastclick的库;
2.监听touchend事件,并在事件中使用preventDefault()阻止冒泡;
3.使用css3的pointer-events=true,pointer-events=none切换来实现;
4.延迟一定的时间来处理事件。本人测试是超过320毫秒就不会出现穿透,与jquery的动画(fadeIn(),fadeOut())等配合,个人感觉良好;
Zepto tap 穿透bug的更多相关文章
- Zepto tap 穿透bug、解决移动端点击穿透问题
当两个层重叠在一起时,或是有个弹窗,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必“穿 透”,“google”说原因是“tap事件实际上是在冒泡 ...
- tap穿透之zepto的bug
一.什么是zepto tap事件穿透?tap事件穿透就是,页面和弹框上都有绑定点击事件,最上层的弹框绑定了tap事件,下层的页面绑定了click事件,在执行完上层事件后会紧接着触发下层事件,进而出现事 ...
- 点击穿透bug · Jaywii
微信点击穿透Bug 问题描述:在移动端为了去除点击延迟引入了fast-click,然而在房贷计算器的开发中遇到了这样一个bug,用户点击了select之后,微信在弹出选择器之后会瞬间因为约300ms的 ...
- modal 弹框遮罩层,滚动穿透bug 解决方案
modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...
- modal 遮罩层,滚动穿透 bug
modal 遮罩层,滚动 穿透bug float 弹层 taro 小程序弹框 滚动击穿 问题 https://segmentfault.com/q/1010000011134345 solution ...
- 手机端 zepto tap事件穿透
什么是事件穿透? 点击上面的一层时会触发下面一层的事件 ”google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致 ...
- zepto中的tap穿透
有一个项目,浮层上是有点击的按钮,但是用tap就会穿透,触发浮层下的页面的点击事件.后来问同事和经过自己尝试,发现用click就可以解决这个问题.
- 周记7——ios中picker滑动穿透bug
Bug描述:使用mint-ui的picker组件时,datepicker和picker在ios的webview(bug是在Hybrid App发现的)中会出现滑动穿透的现象,导致弹层后面的页面也会滚动 ...
- chrome 55 zepto tap事件出错?
刚才升级chrome后发现的,在54.0.2840.98上点击没有问题,在新升级的55.0.2883.75 上点击后会报错Cannot read property 'trigger' of undef ...
随机推荐
- eclipse修改jdk后版本冲突问题
将安装的jdk1.8改为1.7之后出现了很淡疼的问题 修改工程下.setting/ org.eclipse.jdt.core.prefs eclipse.preferences.version=1or ...
- IOS 推送消息 php做推送服务端
IOS推送消息是许多IOS应用都具备的功能,最近也在研究这个功能,参考了很多资料终于搞定了,下面就把步骤拿出来分享下: iOS消息推送的工作机制可以简单的用下图来概括: Provider是指某个iPh ...
- C --gettimeofday===获取某个程序经历的时间
#include <stdio.h> #include <sys/time.h> #include <time.h> int gettimeofday(struct ...
- linux中who命令显示的tty、pts和(:0)(:0.0)是什么意思
http://blog.csdn.net/cwj_beyond/article/details/6987345 http://unix.stackexchange.com/questions/7217 ...
- App 开发:Hybrid 架构下的 HTML5 应用加速方案
在移动 App 开发领域,主流的开发模式可分为 Native.Hybrid.WebApp 三种方式.然而 2013 年,纯 WebApp 开发模式的发展受到一定挫折,以 Facebook 为代表的独立 ...
- VC++6.0使用OpenGL前的配置(必看)
要在VC++6.0中使用opengl,需要配置一下环境设置. 具体需要两步: 1.加入一个头文件,两个lib文件,两个dll文件,放在合适位置. 2.配置一下vc++6.0的Project Setti ...
- 【sicily】卡片游戏
卡片游戏 Time Limit: 1sec Memory Limit:32MB Description 桌上有一叠牌,从第一张牌(即位于顶面的牌)开始从上往下依次编号为1~n.当至少还剩两张牌 ...
- 攻城狮在路上(壹) Hibernate(十一)--- 映射实体关联关系
本文以Customer和Address类的关系为例说明一对一关联映射:以Category和Item类的关系说明多对多关联关系.一.映射一对一关联: 分两种情况:按照外键映射和按照主键映射.这两种方式的 ...
- mac os x10.10 安装thrift
http://thrift.apache.org/docs/install/ 一:安装最新版(自动安装) 最简单的是用homebrew进行安装 安装homebrew 在终端输入ruby -e &quo ...
- javascript、正则的验证
js验证.手机.固话.邮箱.身份证.网址.日期等 Verification.js文件 /* * 手机号码格式 * 只允许以13.15.18开头的号码 * 如:13012345678.159292243 ...