当两个层重叠在一起时,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必“穿透”,“google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,解决方案:

1.使用github上有一个叫做fastclick的库;

2.监听touchend事件,并在事件中使用preventDefault()阻止冒泡;

3.使用css3的pointer-events=true,pointer-events=none切换来实现;

4.延迟一定的时间来处理事件。本人测试是超过320毫秒就不会出现穿透,与jquery的动画(fadeIn(),fadeOut())等配合,个人感觉良好;

Zepto tap 穿透bug的更多相关文章

  1. Zepto tap 穿透bug、解决移动端点击穿透问题

    当两个层重叠在一起时,或是有个弹窗,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必“穿 透”,“google”说原因是“tap事件实际上是在冒泡 ...

  2. tap穿透之zepto的bug

    一.什么是zepto tap事件穿透?tap事件穿透就是,页面和弹框上都有绑定点击事件,最上层的弹框绑定了tap事件,下层的页面绑定了click事件,在执行完上层事件后会紧接着触发下层事件,进而出现事 ...

  3. 点击穿透bug · Jaywii

    微信点击穿透Bug 问题描述:在移动端为了去除点击延迟引入了fast-click,然而在房贷计算器的开发中遇到了这样一个bug,用户点击了select之后,微信在弹出选择器之后会瞬间因为约300ms的 ...

  4. modal 弹框遮罩层,滚动穿透bug 解决方案

    modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...

  5. modal 遮罩层,滚动穿透 bug

    modal 遮罩层,滚动 穿透bug float 弹层 taro 小程序弹框 滚动击穿 问题 https://segmentfault.com/q/1010000011134345 solution ...

  6. 手机端 zepto tap事件穿透

    什么是事件穿透? 点击上面的一层时会触发下面一层的事件 ”google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致 ...

  7. zepto中的tap穿透

    有一个项目,浮层上是有点击的按钮,但是用tap就会穿透,触发浮层下的页面的点击事件.后来问同事和经过自己尝试,发现用click就可以解决这个问题.

  8. 周记7——ios中picker滑动穿透bug

    Bug描述:使用mint-ui的picker组件时,datepicker和picker在ios的webview(bug是在Hybrid App发现的)中会出现滑动穿透的现象,导致弹层后面的页面也会滚动 ...

  9. chrome 55 zepto tap事件出错?

    刚才升级chrome后发现的,在54.0.2840.98上点击没有问题,在新升级的55.0.2883.75 上点击后会报错Cannot read property 'trigger' of undef ...

随机推荐

  1. 【编程题目】输出 1 到最大的 N 位数

    65.输出 1 到最大的 N 位数(运算)题目:输入数字 n,按顺序输出从 1 最大的 n 位 10 进制数.比如输入 3,则输出 1.2.3 一直到最大的 3 位数即 999. 思路:肯定要考虑数字 ...

  2. POJ 3597 Polygon Division (DP)

    题目链接 题意:把一个正多边形分成数个三角形或者四边形,问有多少种方案. 题解: 如果分出的全为三角形的话,那就是正多边形三角剖分问题.它的结果就是Catalan数.现在也可以划分出四边形的话,可以采 ...

  3. java实现批量上传(swfupload)

    下载 swfupload 文件夹 里面包含handlers.js,swfupload.js,swfupload.swf 三个文件. 我的是和ssh项目整合在一起的.因为struts2的拦截器会拦截所有 ...

  4. ios layer 动画-(transform.rotation篇)

    x轴旋转: CABasicAnimation *theAnimation; theAnimation=[CABasicAnimation animationWithKeyPath:@"tra ...

  5. ssh配置免密码登录

    日常工作中很多情况下都需要登录服务器进行管理,一般都是用ssh进行连接,为了防止密码外泄,可以配置下ssh的免密码登录. 首先服务器两台: A:43.224.34.* B:104.238.161.* ...

  6. oracle sqlplus存储过程控制台输出信息

    如果你是使用PL/sql工具,在command 窗口下执行set serveroutput on 然后exec sp;可以看到了或者在sqlplus 中执行上面的代码

  7. iOS 访问粘贴板

    UIPasteboard *pasteboard = [UIPasteboard generalPasteboard]; pasteboard.string = self.label.text;

  8. jQuery中读取json文件示例代码

    json文件是一种轻量级的数据交互格式.一般在jquery中使用getJSON()方法读取,具体示例代码如下,感兴趣的朋友可以参考下哈,希望可以帮助到你   json文件是一种轻量级的数据交互格式.一 ...

  9. LR性能指标分析

    Memory: ·Available Mbytes 简述:可用物理内存数.如果Available Mbytes的值很小(4 MB或更小),则说明计算机上总的内存可能不足,或某程序没有释放内存. 参考值 ...

  10. Java集合源码学习(二)ArrayList分析

    >>关于ArrayList ArrayList直接继承AbstractList,实现了List. RandomAccess.Cloneable.Serializable接口,为什么叫&qu ...