回答一

穿透(点穿)是在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点穿(穿透)解决办法的更多相关文章

  1. angularJS+Ionic移动端图片上传的解决办法

    前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有 ...

  2. RabbitMQ 消费端 Client CPU 100%的解决办法

    Func<bool> run = () => { try { using (IConnection conn = cf.CreateConnection()) { using (IM ...

  3. redis缓存穿透解决办法--排它锁

  4. win10的MySQL客户端连接centos7虚拟机的mysql服务端连接不上解决办法

    分别在win10和Centos虚拟机上装有MYSQL,但用电脑的mysql客户端连接centos7的服务端报错如下: 解决办法: 如果可以从虚拟机连接到电脑的MYSQL服务端, 那就是CentOS7的 ...

  5. [转载]常见的移动端H5页面开发遇到的坑和解决办法

    转过来,平时看看.虽然还有很多问题至今无解.比如:华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏.!! 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是 ...

  6. 常见的移动端H5页面开发遇到的坑和解决办法

    转过来,平时看看.虽然还有很多问题至今无解.比如:华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏.!! 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是 ...

  7. JS.中文乱码,Jsp\Servlet端的解决办法

    JS.中文乱码,Jsp\Servlet端的解决办法 2010-03-08 15:18:21|  分类: Extjs |  标签:encodeuricomponent  乱码  urldecoder   ...

  8. 移动端 iphone touchmove滑到边界(浏览器地址拦及以上) touchend失效解决办法

    在移动端h5页面:尤其那些全屏幕的盒展示切换页面,当用户无意中将手指滑到了 浏览器地址拦以上(中国移动这快区域):此时,手指已经离开屏幕了,但是ios上无法监听到touchend 事件:touchen ...

  9. [移动端] IOS下border-image不起作用的解决办法

    上周五突然接到现场的一个需求,做一个移动端的劳模展示页面.现场美工把原型图发了过来.这个样子的: 说实在的很想吐槽一下我们美工的审美哈,不过这不是重点. 因为边框是需要特殊花纹的所以打算用border ...

随机推荐

  1. 虚拟机 centos 7 nginx安装

    1下载vmware 12,并安装.百度即可 2下载centos 7,将其安装在vmware 12中.百度即可,无复杂设置. 3设置vmware 中centos7能上网: a.右键计算机->管理- ...

  2. 测试sql性能方法

    SET STATISTICS io ON         SET STATISTICS time ON         go          ---你要测试的sql语句          selec ...

  3. SmartImageView的使用

    对于Android智能图像查看 SmartImageView是一个简易替换为Android标准的ImageView这还可以让图像从URL或用户的联系人地址簿加载.图片被缓存到内存和磁盘的超快速装载. ...

  4. HDU 5823 color II

    dp[i]表示i子图的最小染色数目. dp[i]=min( dp[i], dp[j]+1 ), j是i的子集,并且j图内的点没有边相连. 高效率枚举i子集的方法:for(int j=i;j;j=(j- ...

  5. HDU 5366 The mook jong

    先暴力写了一个DFS,然后找规律.. #include<cstdio> #include<cstring> #include<cmath> #include< ...

  6. ios电话拨打进行监听电话状态

    #import "ViewController.h" #import <CoreTelephony/CTCallCenter.h> #import <CoreTe ...

  7. Apriori算法-java

    package com.yang; import java.util.*; public class Apriori { private double minsup = 0.2;// 最小支持度   ...

  8. 利用朴素贝叶斯算法进行分类-Java代码实现

    http://www.crocro.cn/post/286.html 利用朴素贝叶斯算法进行分类-Java代码实现  鳄鱼  3个月前 (12-14)  分类:机器学习  阅读(44)  评论(0) ...

  9. jQuery第一章

    一.jQuery的优势 1.轻量级:压缩之后大小只有30KB左右. 2.强大的选择器:jQuery允许CSS1到CSS3几乎所有的选择器以及自身独创的选择器. 3.出色的DOM操作的封装:jQuery ...

  10. android网络编程之HttpUrlConnection的讲解--实现文件的断点上传

    1.网络开发不要忘记在配置文件中添加访问网络的权限 <uses-permission android:name="android.permission.INTERNET"/& ...