Zepto tap 穿透bug
当两个层重叠在一起时,使用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的更多相关文章
- Zepto tap 穿透bug、解决移动端点击穿透问题
当两个层重叠在一起时,或是有个弹窗,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必“穿 透”,“google”说原因是“tap事件实际上是在冒泡 ...
- tap穿透之zepto的bug
一.什么是zepto tap事件穿透?tap事件穿透就是,页面和弹框上都有绑定点击事件,最上层的弹框绑定了tap事件,下层的页面绑定了click事件,在执行完上层事件后会紧接着触发下层事件,进而出现事 ...
- 点击穿透bug · Jaywii
微信点击穿透Bug 问题描述:在移动端为了去除点击延迟引入了fast-click,然而在房贷计算器的开发中遇到了这样一个bug,用户点击了select之后,微信在弹出选择器之后会瞬间因为约300ms的 ...
- modal 弹框遮罩层,滚动穿透bug 解决方案
modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activ ...
- modal 遮罩层,滚动穿透 bug
modal 遮罩层,滚动 穿透bug float 弹层 taro 小程序弹框 滚动击穿 问题 https://segmentfault.com/q/1010000011134345 solution ...
- 手机端 zepto tap事件穿透
什么是事件穿透? 点击上面的一层时会触发下面一层的事件 ”google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致 ...
- zepto中的tap穿透
有一个项目,浮层上是有点击的按钮,但是用tap就会穿透,触发浮层下的页面的点击事件.后来问同事和经过自己尝试,发现用click就可以解决这个问题.
- 周记7——ios中picker滑动穿透bug
Bug描述:使用mint-ui的picker组件时,datepicker和picker在ios的webview(bug是在Hybrid App发现的)中会出现滑动穿透的现象,导致弹层后面的页面也会滚动 ...
- chrome 55 zepto tap事件出错?
刚才升级chrome后发现的,在54.0.2840.98上点击没有问题,在新升级的55.0.2883.75 上点击后会报错Cannot read property 'trigger' of undef ...
随机推荐
- 20145213《Java程序设计》第五周学习总结补充
20145213<Java程序设计>第五周学习总结补充 教材学习内容总结 欠的账都是要还的!第九章的内容躲过对酒当歌的夜,躲不过四下无人的街.由于第五周贪玩,疏忽冷落了Collection ...
- 使用按钮控制HTML5背景音乐开关
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- css3圣诞雪景球开源
css3圣诞雪景球开源 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- Oracle dbms_lock.sleep()存储过程使用技巧-场景-分析-实例
<Oracle dbms_lock.sleep()存储过程使用技巧>-场景-分析-实例 摘要:今天是2014年3月10日,北京,雾霾,下午组织相关部门开会.会议的结尾一名开发工程师找到了我 ...
- json数据类型
JSON 语法规则 JSON 语法是 JavaScript 对象表示法语法的子集. 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 JSON 名称/值对 JSON 数据的书写格式是 ...
- 16.迭代器模式(Iterator Pattern)
using System; namespace ConsoleApplication9 { class Program { /// <summary> /// 迭代器模式提供了一种方法顺序 ...
- Spell checker
Spell checker Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Subm ...
- Mysql中文乱码问题完美解决方案
drop database`netctoss_demo` ;CREATE DATABASE `netctoss_demo` CHARACTER SET 'utf8' COLLATE 'utf8_gen ...
- 2014百度之星资格赛 1001:Energy Conversion(水题,逻辑题)
Energy Conversion Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- 攻城狮在路上(叁)Linux(二十五)--- linux内存交换空间(swap)的构建
swap的功能是应付物理内存不足的状况,用硬盘来暂时放置内存中的信息. 对于一般主机,物理内存都差不多够用,所以也就不会用到swap,但是对于服务器而言,当遇到大量网络请求时或许就会用到. 当swap ...