移动端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 ...
随机推荐
- php 分页类(1)
inter.php <head> <meta http-equiv="Content-Type" content="text/html; charset ...
- Hadoop上的中文分词与词频统计实践 (有待学习 http://www.cnblogs.com/jiejue/archive/2012/12/16/2820788.html)
解决问题的方案 Hadoop上的中文分词与词频统计实践 首先来推荐相关材料:http://xiaoxia.org/2011/12/18/map-reduce-program-of-rmm-word-c ...
- hdu_5274_Dylans loves tree(树剖)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5274 题意:给一棵树和叶子的值,然后有单点修改操作和询问区间操作,询问的是每一个值出现的奇偶次数,如果 ...
- 裸二分图匹配poj1469
poj1496 题意: 给你p门课程和n个学生,一个学生可以选0门,1门,或者多门课程, 现在要求一个由p个学生组成的集合,满足下列2个条件: 1.每个学生选择一个不同的课程 2.每个课程都有不同的代 ...
- 指定的命名连接在配置中找不到、非计划用于 EntityClient 提供程序或者无效
以下内容来自互联网 (1)web: 需要在客户端配置文件的中增加connectionString节点,此节点描述了EntityClient的连接信息. 例如: 在web.config的中增加conne ...
- tomcat连接数设置
如何加大tomcat连接数 在tomcat配置文件server.xml中的<Connector ... />配置中,和连接数相关的参数有:minProcessors:最小空闲连接线程数,用 ...
- mysql innobackupex备份工具
先简单介绍一下这个工具:innobackupexinnobackupex比xtarbackup有更强的功能,它整合了xtrabackup和其他的一些功能,他不但可以全量备份/恢复,还可以基于时间的增量 ...
- 关于Winform中的用户代理
问题描述: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 解释: 1. 应用程序版本“Mozilla ...
- ASP.NET MVC3 系列教程 - 目录
ASP.NET MVC3 系列教程 - 目录 I:ASP.NET MVC3 新增的功能 ASP.NET MVC3 系列教程 - Razor视图引擎基础语法ASP.NET MVC3 系列教程 - V ...
- 使用VS软件打开网站在浏览器浏览的方法
1.用VS软件打开网站之后,先检查网站是否使用IIS Express开发 2.若不是,则切换成使用IIS Express开发 3.检查项目使用的托管管道模式设置为经典模式了没有 4.最后选择“在浏览器 ...