关于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模块 ...
随机推荐
- Python3基础 闭包 简单示例
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
- win7(windows 7)系统下安装SQL2005(SQL Server 2005)图文教程——转载
操作系统:Microsoft Windows 7 旗舰版(32位) 数据库版本:SQL Server 2005 简体中文开发板 数据库下载链接:http://pan.baidu.com/share/l ...
- gdb命令整理
Microsoft Windows XP [版本 ] (C) 版权所有 - Microsoft Corp. C:\Documents and Settings\Administrator>e: ...
- Angular - - 脏值检查及其相关
今天突然就想写写$digest和$apply,这些都是脏值检查的主体内容. 先以普通js来做一个简单的监控例子吧: var div = ducoment.getElementById("my ...
- iOS 之 UICollectionView
1. iOS 之 UICollectionView 之 原理介绍 2. iOS 之 UICollectionView 之 开发步骤 之 OC 3. iOS 之 UICollectionView 之 开 ...
- Xcode 设置文件生成时的模板
1. 目的 设置 Xcode 生成的文件的格式,如姓名.公司等. 2. 步骤 2.1. 找到文件 step 1. 右键Xcode图标 step 2. 显示包内容 step 3. 找到目录 /Conte ...
- UGUI batch 规则和性能优化
UGUI batch 规则和性能优化 (基础) Unity 绘图性能优化 - Draw Call Batching : http://docs.unity3d.com/Manual/DrawCallB ...
- Cisco VPN Client Error 56解决
Cisco VPN Client Error 56解决 VPN Client报错 650) this.width=650;" style="width:575px;height:1 ...
- 细说WPF数据绑定
简单的事例: <Slider Name="mySlider" Height="28" HorizontalAlignment="Left&q ...
- Hibernate核心配置文件
Hibernate.cfg.xml是Hibernate操作数据库的核心配置文件 *********************************************** 作用 01.管理实体类的 ...