移动端touch点穿(穿透)解决办法
回答一
穿透(点穿)是在mobile各种浏览器上发生的常见的bug。可能是由click事件的延迟或者事件冒泡导致。
移动web开发常用的Zepto库中的touch和tap事件就会有点穿的bug(Zepto的事件都绑在Document上)。
解决方案
1、使用fastclick,这个可以非常完美的解决点穿问题。
2、在touchend事件回调中加入preventDefault, 并在下一层中加上pointer-events:none。
回答二
移动端的click都是touch之后,才会模拟触发。
触发的顺序是
touchstart
touchmove
touchend
mousedown
mousemove
mouseenter
click
在重叠的区域里,被遮盖的元素绑定click,遮盖的元素绑定touch事件,且touch后遮盖的元素会隐藏的话,就会造成穿透,因为click是在touch之后延迟触发的,浏览器会误认为是在遮盖的元素上触发了click。
最好的解决方案是 自己通过touchstart,touchmove,touchend,来模拟一个click(tap)事件,这样除了防止穿透外,事件响应速度也会提高。
移动端touch点穿(穿透)解决办法的更多相关文章
- angularJS+Ionic移动端图片上传的解决办法
前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有 ...
- RabbitMQ 消费端 Client CPU 100%的解决办法
Func<bool> run = () => { try { using (IConnection conn = cf.CreateConnection()) { using (IM ...
- redis缓存穿透解决办法--排它锁
- win10的MySQL客户端连接centos7虚拟机的mysql服务端连接不上解决办法
分别在win10和Centos虚拟机上装有MYSQL,但用电脑的mysql客户端连接centos7的服务端报错如下: 解决办法: 如果可以从虚拟机连接到电脑的MYSQL服务端, 那就是CentOS7的 ...
- [转载]常见的移动端H5页面开发遇到的坑和解决办法
转过来,平时看看.虽然还有很多问题至今无解.比如:华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏.!! 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是 ...
- 常见的移动端H5页面开发遇到的坑和解决办法
转过来,平时看看.虽然还有很多问题至今无解.比如:华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏.!! 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是 ...
- JS.中文乱码,Jsp\Servlet端的解决办法
JS.中文乱码,Jsp\Servlet端的解决办法 2010-03-08 15:18:21| 分类: Extjs | 标签:encodeuricomponent 乱码 urldecoder ...
- 移动端 iphone touchmove滑到边界(浏览器地址拦及以上) touchend失效解决办法
在移动端h5页面:尤其那些全屏幕的盒展示切换页面,当用户无意中将手指滑到了 浏览器地址拦以上(中国移动这快区域):此时,手指已经离开屏幕了,但是ios上无法监听到touchend 事件:touchen ...
- [移动端] IOS下border-image不起作用的解决办法
上周五突然接到现场的一个需求,做一个移动端的劳模展示页面.现场美工把原型图发了过来.这个样子的: 说实在的很想吐槽一下我们美工的审美哈,不过这不是重点. 因为边框是需要特殊花纹的所以打算用border ...
随机推荐
- events.js:72 throw er; // Unhandled 'error' event
http://stackoverflow.com/questions/24525253/events-js72-throw-er-unhandled-error-event 出现了一个上述的错误. e ...
- 关于GVIM的配置。
最近开始考虑从常用的 Dev-Cpp 和 Visual Studio 开发环境中转到gvim+gcc+gdb. 我一直觉得IDE很好方便,不是很明白别人这样的配置.但还是开始有意识的去尝试更换环境. ...
- CentOS 6.4 系统下的MySQL的主从库配置
首先了解到一. 二一.(MySQL下创建用户并且赋予权限)root用户创建yong用户的SQL语句 CREATE USER 'yong'@'localhost' IDENTIFIED BY 'yong ...
- 模仿QQ客户端和服务器(支持window和linux)
界面部分我还没有想好,到底是用MFC还是duilib呢? 好吧我先发一个demo版本,功能都有,以下为功能展示. 先说服务器(这个有俩个版本,支持win和linux):用的数据库为MYsql(因为是便 ...
- Tomcat目录下文件详解
一.Tomcat背景 (转) 自从JSP发布之后,推出了各式各样的JSP引擎.Apache Group在完成GNUJSP1.0的开发以后,开始考虑在SUN的JSWDK基础上开发一个可以直接提供We ...
- Storm官方文档翻译之在生产环境集群中运行Topology
在进群生产环境下运行Topology和在本地模式下运行非常相似.下面是步骤: 1.定义Topology(如果使用Java开发语言,则使用TopologyBuilder来创建) 2.使用StormSub ...
- C#常用集合的使用
大多数集合都在System.Collections,System.Collections.Generic两个命名空间.其中System.Collections.Generic专门用于泛型集合. 针对特 ...
- 运维必备:Oracle自备份精简教程(linux及win)
Oracle在linux环境下的自动备份 1.自动导出及历史文件删除脚本 su - oracle<<EOF cd /db_backup/databak mv orabak*.* /db_b ...
- json的引号之伤
最近读他们的jquery解读的源码,由于版本不同,我可能看的是他们解读的1.7的,但是我本身运行的可能是1.9的,所以有些出处,但是中心思想不变,我有疑问的时候,直接debug,让例子自己走一遍,好处 ...
- nuget 服务器崩溃
1,首先是500错误 2.服务器处理请求时遇到错误.异常消息为"对路径" bin"目录的访问被拒绝." 对bin目录添加User用户读写权限