zepto tap事件的一个bug
来源:互联网 发布:keeper是什么软件 编辑:程序博客网 时间:2024/04/26 13:58
最近在使用zepto.js的时候,发现其tap事件的一个BUG,被产品和测试同学反复找了几次之后,终于下定决定去研究zepto的源码,并解决了问题。
BUG情况说明:
给页面<a>标签绑定了tap事件,在移动设备上点击按钮貌似一切正常,可以正常响应。
但是,把页面上下滑动几次之后,或者在滑动时手指滑动出移动屏幕之外,之后再点击按钮,就会发现第一次点击的时候事件没被触发,需要点击第二次才会正常,而且几乎是必现的。一开始的时候我还以为是安卓Webview要获取页面焦点的原因,后来研究了下zepto源码之后,发现原来不是。
tap事件实现原理:
其实不用看代码都猜的出来,是用touchstart touchmove touchend这三个事件去实现的,没错,就是这样。
但是为了区分“点击”和“拖动”两个动作,zepto是用了deltaX和deltaY两个变量去分别记录手指在触碰到屏幕时到离开屏幕时的x轴和y轴距离,如果deltaX>30px或者deltaY>30px,则认为是“拖动”动作,就不会触发tap事件了。
一切看似正常,但是细看一下,原来deltaX和deltaY的置0的是在touchend里实现的,而移动设备上,有两种情况是有可能导致touchend事件没触发(1.快速划动屏幕多次,2.萌动屏幕时手指划出屏幕边界),这样deltaX和deltaY就不会被置0了,等到下次再点击的时候,deltaX和deltaY就有可能大于30px,导致tap事件不被触发。
问题解决:
想必大家都知道该怎么解决,没错,就是在touchstart时添加deltaX和deltaY的置0,代码如下:
- .on('touchstart MSPointerDown pointerdown', function(e){
- deltaX = deltaY = 0;
- ……
zepto里修改
- zepto tap事件的一个bug
- zepto tap事件的一个bug
- zepto tap事件的一个bug
- zepto-tap-bug
- 最近一段时间在使用zepto.js的tap事件的时候,出现执行两次的bug,并报错
- Zepto tap事件中需要触发两次的问题
- zepto tap事件阻止事件冒泡
- 解决关于移动端zepto的tap点透bug(英文ghost click)
- zepto.js tap 会执行两次的bug以及 Uncaught TypeError
- zepto的tap事件的点透问题的几种解决方案
- 最新版Chrome模拟器下zepto的tap事件执行两次解决办法
- Zepto tap 穿透bug、解决移动端点击穿透问题
- zepto tap “点透”的解决
- Zepto tap事件“穿透”、“点透”问题研究
- zepto之tap事件点透问题分析及解决方案
- 在UITextField的rightView 添加一个tap事件没有成功
- 说说zepto.js的事件
- 窥探zepto的事件模块
- 剑指offer-求1+2+3+…+n
- .DS_Store 文件怎么彻底删除?
- iOS面向切面编程
- Leetcode 328. Odd Even Linked List (Medium) (cpp)
- 如何释放含有NSTimer的UITableViewCell(SubView)
- zepto tap事件的一个bug
- 自定义View 实现抽屉式侧滑菜单 MySlidingMenu
- 2809: [Apio2012]dispatching
- 3年职业规划
- Ecplise 配置Python,Jython开发环境
- 在ubuntu系统环境下搭建java环境,以及各种软件的安装
- JNDI全面总结
- 用Shiro实现身份认证
- 卡巴斯基表示NSA被泄漏的恶意软件的确真实存在