zepto的bug1
给页面<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的更多相关文章
- TypeScript为Zepto编写LazyLoad插件
平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...
- zepto/jQuery、AngularJS、React、Nuclear的演化
写在前面 因为zepto.jQuery2.x.x和Nuclear都是为现代浏览器而出现,不兼容IE8,适合现代浏览器的web开发或者移动web/hybrid开发.每个框架类库被大量用户大规模使用都说明 ...
- JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- jquery和zepto的扩展方法extend
jquery和zepto的扩展方法extend 总结下jQuery(3.1.1)和zepto(1.1.6)到底是如何来开放接口,使之可以进行扩展,两者都会有类型判断,本文使用简单的类型判断,暂不考虑兼 ...
- [原创]zepto打造一款移动端划屏插件
最近忙着将项目内的jquery 2换成zepto 因为不想引用过多的zepto包,所以花了点时间 zepto真的精简了许多,源代码看着真舒服 正好项目内需要一个划屏插件,就用zepto写了一个 逻辑其 ...
- zepto之tap事件点透问题分析及解决方案
点透现象出现的场景: 当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件.在这种情况下,点击A/B重叠的部分,就 ...
- zepto弹出层组件
html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- zepto返回顶部动画
点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; v ...
随机推荐
- 【linux】jdk安装
1.在http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下载最新版的rpm文件,我 ...
- Linux 命令执行结果输出到屏幕的同时写入到文件中
tee命令可以做到这一点: 例:ls -al /home | tee log 就可以把命令输出的内容显示在屏幕上的同时也输出至文件log.
- 【jquery】一个简单的单选、多选、全选、反选、删除的小功能
对表格内容进行单行删除.单行选中.多行选中.全选.反选.删除选中行等操作 HTML代码 <table class="table table-bordered border-shadow ...
- Sql Server 保留几位小数的两种做法
数据库里的 float momey 类型,都会精确到多位小数.但有时候 我们不需要那么精确,例如,只精确到两位有效数字. 1. 使用 Round() 函数,如 Round(@num,2) 参数 2 ...
- C#更新SQLServer中的TimeStamp字段(时间戳) 防止同时修改一行时覆盖更新
C#更新SQLServer中的TimeStamp字段(时间戳) 分类: C#2012-10-24 15:10 1878人阅读 评论(0) 收藏 举报 public partial class Form ...
- 使用连发互联空间+SQLyog 设置我们的数据库链接
在我使用SQLyog(小海豚)管理我的数据库的时候,主机空间为连发互联的(自己做着玩,这个便宜),遇到一些坑,自己写一下记录一下,省的下次忘记了又浪费时间. 首先你要有连发互联的空间,可以淘宝购买,连 ...
- idea 用maven骨架生成项目速度慢的问题
使用mvn archetype:generate命令时,加上-DarchetypeCatalog=local archetypeCatalog=local
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(四) 之 用户搜索(Elasticsearch),加好友流程(1)。
前面几篇基本已经实现了大部分即时通讯功能:聊天,群聊,发送文件,图片,消息.不过这些业务都是比较粗犷的.下面我们就把业务细化,之前用的是死数据,那我们就从加好友开始吧.加好友,首先你得知道你要加谁.L ...
- android bitmap的放大缩小
private static Bitmap big(Bitmap bitmap) { Matrix matrix = new Matrix(); matrix.postScale(1.5f,1.5f) ...
- Linux进程间通讯的几种方式的特点和优缺点,和适用场合
http://blog.csdn.net/jeffcjl/article/details/5523569 由于不同的进程运行在各自不同的内存空间中.一方对于变量的修改另一方是无法感知的.因此.进程之间 ...