关于zepto在chrome中触发两次的解决方案
复现条件:chrome 55+
1.zepto tap的实现及double fire的原因
在监听DOM根节点的时候,touchStart后通过XY的坐标偏差,与tapTime的计时判断Tap/LongTap/doubleTap,而两次触发正是入口绑定事件的问题。 
同时绑定了touchStart pointerDown,原先这种写法只是为了hack 微软的Edge浏览器和兄弟浏览器,但是chorme 从55版本时就开始支持pointer。而我浏览版本很高,导致了这个问题可以复现。
Timline中对js监听图
可以发现 回调函数被执行了两遍
2.zepto tap目前在touch端的的兼容
身边可测试机型有限
ios9-10没问题
安卓 4.4 chrome UC也无此问题
3.解决方案
1.更改源码 对useragent进行判断bind eventListener时区别bind
2.节流函数/全局变量Flag
3.tap换成click
关于zepto在chrome中触发两次的解决方案的更多相关文章
- Chrome中无法断点调试的解决方案
chrome的调试功能实在是太强大了,相比之下ie的就是一垃圾. 最近在调试时出现一种情况,死活不能设置断点,也不能跟踪调试,这下抓狂了. JS也是非常简单的,也没有压缩.为什么就不能调试呢? 网上狂 ...
- 解决jQuery中dbclick事件触发两次click事件
首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbc ...
- Google Chrome中的高性能网络(二)
Chrome Predictor的预测功能优化 Chrome会随着使用变得更快. 它这个特性是通过一个单例对象Predictor来实现的.这个对象在浏览器内核进程(Browser Kernel Pro ...
- Chrome 中的 JavaScript 断点设置和调试技巧 (转载)
原文地址:http://han.guokai.blog.163.com/blog/static/136718271201321402514114/ 你是怎么调试 JavaScript 程序的?最原始的 ...
- Web 性能优化:Preload与Prefetch的使用及在 Chrome 中的优先级
摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...
- Google Chrome中的高性能网络-[译]《转载》
以下内容是"The Performance of Open Source Applications" (POSA)的草稿, 也是The Architecture of Open S ...
- iframe onload事件触发两次
标准参考 关于 HTML 4.01 规范中 onload 内在事件说明:http://www.w3.org/TR/html401/interact/scripts.html#adef-onload 关 ...
- chrome中不可见字符引发的float问题
起因是刷知乎时碰到这么个问题:https://www.zhihu.com/question/41400503 问题代码如下: <!DOCTYPE html> <html lang=& ...
- Chrome中的Device模块调式响应性设计
Chrome中的Device模块调式响应性设计 阅读目录 启用Device模块 Device模块设置介绍 自定义预设介绍 查看media queries 触发触摸事件 回到顶部 启用Device模块 ...
随机推荐
- JDBC连接sql server数据库的详细步骤和代码
JDBC连接sql server数据库的详细步骤和代码 JDBC连接sql server数据库的步骤如下: 1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Ja ...
- 避免Node.js中回调地狱
为了解决这个阻塞问题,JavaScript严重依赖于回调,这是在长时间运行的进程(IO,定时器等)完成后运行的函数,因此允许代码执行经过长时间运行的任务. downloadFile('example. ...
- 绘图——Android绘图基础:Canvas、Paint等
Android的绘图应该继承View组件,并重写它的onDraw(Canvas canvas)方法即可. 重写onDraw(Canvas canvas)方法时涉及一个绘图API:Canvas,Canv ...
- inheritprototype原型继承封装及综合继承最简实例
1.inheritprototype.js ;(function(){ var s = { inheritObject:function(o){//对象继承封装 ...
- 2.3. 实体(Core Data 应用程序实践指南)
Entity 实体,就像是数据表的映射类.用实体就可以创建托管对象了. 实体需要做的就是设置实体名称.实体属性及属性数据类型. 还可以根据实体配置NSManagedObject的子类(可选),创建子类 ...
- thinkphp 3.2 导入第三方类库的两种方式
第一种
- Unity3D中切换场景可能导致材质变暗的问题
Unity版本:5.1.1f1 做公司项目的时候,无意间发现了一个很奇葩的现象:场景A(纯UI,故没有光源)转场到场景B的时候,B中原有的光源似乎失效了,但在Hierarchy窗口中能够看到光源存在, ...
- Activity的生命周期与加载模式——Activity的4种加载模式
配置Activity时可指定android:launchMode属性,该属性用于配置该Activity的加载模式,该属性支持如下4个属性值. standard:标准模式,这是默认的加载模式. sing ...
- Swift之UITabBarController 导航控制器颜色的改变
废话不多 直接上代码 self.window = UIWindow(frame: UIScreen.mainScreen().bounds) self.window!.backgroundColor ...
- JSP userBean setProperty getProperty指令使用
JSP userBean setProperty getProperty指令使用 javaBean的属性取决于get/set方法,而不是真实的属性名称. jsp文件: <%@ page lang ...