给页面<a>标签绑定了tap事件,在移动设备上点击按钮貌似一切正常,可以正常响应。

但是,把页面上下滑动几次之后,或者在滑动时手指滑动出移动屏幕之外,之后再点击按钮,就会发现第一次点击的时候事件没被触发,需要点击第二次才会正常,而且几乎是必现的。

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的bug1的更多相关文章

  1. TypeScript为Zepto编写LazyLoad插件

    平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...

  2. zepto/jQuery、AngularJS、React、Nuclear的演化

    写在前面 因为zepto.jQuery2.x.x和Nuclear都是为现代浏览器而出现,不兼容IE8,适合现代浏览器的web开发或者移动web/hybrid开发.每个框架类库被大量用户大规模使用都说明 ...

  3. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  4. jquery和zepto的扩展方法extend

    jquery和zepto的扩展方法extend 总结下jQuery(3.1.1)和zepto(1.1.6)到底是如何来开放接口,使之可以进行扩展,两者都会有类型判断,本文使用简单的类型判断,暂不考虑兼 ...

  5. [原创]zepto打造一款移动端划屏插件

    最近忙着将项目内的jquery 2换成zepto 因为不想引用过多的zepto包,所以花了点时间 zepto真的精简了许多,源代码看着真舒服 正好项目内需要一个划屏插件,就用zepto写了一个 逻辑其 ...

  6. zepto之tap事件点透问题分析及解决方案

    点透现象出现的场景: 当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件.在这种情况下,点击A/B重叠的部分,就 ...

  7. zepto弹出层组件

    html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...

  8. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  9. zepto返回顶部动画

    点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; v ...

随机推荐

  1. myeclipse破解

    由于内容比较多,我就直接转载了 ,同时感谢原博主 http://blog.itpub.net/27042095/viewspace-1164998/

  2. 用java套接字创建HTTP客户与服务器程序

    最近再学习java的web编程,发现用java创建一个小的服务器和客户端是如此的简单,引用经典图书<Tomcat与Java Web开发技术详解(第二版)>(孙卫琴) 根据书中案例敲代码自己 ...

  3. 蜥蜴(bzoj 1066)

    Description 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距离是d,即蜥蜴可以跳到平 ...

  4. Mysql游标

    14.6.6.1 Cursor CLOSE Syntax 14.6.6.2 Cursor DECLARE Syntax 14.6.6.3 Cursor FETCH Syntax 14.6.6.4 Cu ...

  5. JS 打印对象的方法

      2 3 4 5 6 7 8 function writeObj(obj){  var description = "";  for(var i in obj){   var p ...

  6. 警告 - no rule to process file 'WRP_CollectionView/README.md' of type net.daringfireball.markdown for architecture i386

    warning: no rule to process file '/Users/mac/Downloads/Demo/Self/WRP_CollectionView/WRP_CollectionVi ...

  7. NYOJ之奇偶数分离

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAscAAAJ8CAIAAACdmZvPAAAgAElEQVR4nO3dPVLjStsG4G8T5CyEFC

  8. IT人学习方法论(二):学习误区

    之前我们讨论了“学什么”的问题,今天我们来谈一谈“怎么学”的问题.磨刀不误砍柴工,我们要提高学习效率,首先需要找到自己学习方法上的误区. 一些常见的学习方法误区 1)资料导向型 现在就停止阅读这篇文章 ...

  9. 苹果开发者账号申请时报错提示错误:Legal Entity Name

    he information you entered did not match your profile in the D&B database. Before submitting you ...

  10. C# virtual override 和 new 的区别

    一直以来我都对 virtual  override 和 new 之间的区别感到疑惑不解. 特别笔试的时候特别容易考到,真的很容易弄错啊,畜生! 光看理论永远记不住,那不如写几行代码就懂了. 首先看看v ...