移动端click点透bug

click点透bug有一个特定的产生情况：

当上层元素是tap事件，且tap后消失，下层元素是click事件。这个时候，tap上层元素的时候就会触发下层元素的click事件

click点透

以下情况，在B元素上有半透明灰色色遮盖层C，黄色B元素内有可点击链接A

解决方法

  1. 上下层都是tap事件，缺点：a标签等元素本身就是自带的click事件，更改为tap比较困难

  2. 缓动动画，让上层元素消失的时候不要瞬间消失，而是以动画的形式消失，事件超过300ms就可以了

  3. 使用中间层,添加一个透明的中间元素，给它添加click事件并消失，这个时候接收点透的是透明的中间层

  4. 使用fastclick



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        #a,#b{

            width: 100px;

            height: 80px;

            background: blue;

            float: left;

        }

        #a{

            background: red;

        }

        #zhe{

            width: 100%;

            height: 100px;

            background: rgba(0,0,0,0.3);

            position: absolute;

            top: 0;

            left: 0;

            z-index: 1000;

        }

        #zj{

            width: 100%;

            height: 100px;

            background: rgba(0,0,0,0);

            position: absolute;

            top: 0;

            left: 0;

        }

    </style>

</head>

<body>

    <div id="a"></div>

    <div id="b"></div>

    <div id="zj"></div>

    <div id="zhe"></div>

</body>

<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>

<script src="./zepto.js"></script>

<script>

    //利用fastclick解决点透问题

    // $(function(){

    //     FastClick.attach(document.body);

    //     $("#zhe").tap(function(){

    //         $(this).hide();

    //     })

    //     $("#a").click(function(){

    //         $(this).css("background","blue")

    //     })

    // })

    //两个都用tag事件

    // $(function(){

    //     $("#zhe").tap(function(){

    //         $(this).hide();

    //     })

    //     $("#a").tag(function(){

    //         $(this).css("background","blue")

    //     })

    // })

    //缓冲动画

    // $(function(){

    //     $("#zhe").tap(function(){

    //         setTimeout(function(){

    //             $(this).hide();

    //         }.bind(this),300)

    //     })

    //     $("#a").click(function(){

    //         $(this).css("background","blue")

    //     })

    // })

    //加中间层，点透的时候触发中间层的click事件

    $(function(){

        $("#zhe").tap(function(){

            // setTimeout(function(){

                $(this).hide();

            // }.bind(this),300)

        })

        $("#zj").click(function(){

            $(this).hide()

        })

        $("#a").click(function(){

            $(this).css("background","blue")

        })

    })

</script>

</html>

移动端click点透bug的更多相关文章

  1. 移动端的click点透问题

    在移动端开发中,有时会出现click点透的问题. 一.什么是click点透 以下情况,在B元素上有半透明红色遮盖层A,黄色B元素内有可点击链接C. tips:以下举例仅针对webkit内核浏览器,所有 ...

  2. web移动前端的click点透问题

    在移动端开发中,有时会出现click点透的问题. 一.什么是click点透 以下情况,在B元素上有半透明红色遮盖层A,黄色B元素内有可点击链接C. tips:以下举例仅针对webkit内核浏览器,所有 ...

  3. ［ 面试没回答上的问题2］IOS上给body绑定click事件的bug

    面试被问到ios上的bug,自己提到绑定click事件的bug,但是并没有把问题讲的很清楚,这里再清理一下思路. 这个bug只在IOS上有,包括ihone,ipad,由于ios浏览器都用的safari ...

  4. 移动端click事件300ms延迟

    移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...

  5. 彻底理解和解决移动WEB开发中CLICK点透问题

    在移动WEB开发中,有时候可能会出现点透问题,本文将围绕这个TAP点透问题,详细的讲述到底什么是点透,为什么会出现点透,如何避免出现点透,如果不可避免的出现了,如何解决解决移动WEB开发中CLICK点 ...

  6. 移动端click时间延迟300

    解决移动端click延迟事件方法,,引入fastclick.js  然后在script标签里面写上FastClick.attach(document.body); <!DOCTYPE html& ...

  7. 移动端click事件延迟300ms到底是怎么回事，该如何解决？

    不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...

  8. vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟

    fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...

  9. h5开发app,移动端 click 事件响应缓慢的解决方案

    造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...

随机推荐

  1. MySQL日期格式化 利用Mysql的DATE_FORMAT（）进行日期格式转换

    碰到一个MYSQL的问题,表logstatb中moment字段的内容是"年-月-日 时:分:秒",需要查询匹配“年月日”或“时:分:秒”即可的数据条目,这个时候就可以通过下面的SQ ...

  2. Java HashSet和ArrayList的查找Contains（）时间复杂度

    今天在刷leetCode时,碰到了一个题是这样的. 给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 看到 ...

  3. Spring，SpringMVC，SpringBoot，SpringCloud有什么区别和联系？

    简单介绍 Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架.Spring使你能够编写更干净.更可管理.并且更易于测试的代码. Spring MVC是Spring的一个模块,一 ...

  4. 用jQuery实现鼠标移动切换图片动画

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. NX二次开发-UFUN CSYS坐标系转换UF_CSYS_map_point

    1 NX9+VS2012 2 3 #include <uf.h> 4 #include <uf_curve.h> 5 #include <uf_csys.h> 6 ...

  6. NX二次开发-UFUN获取相邻面UF_MODL_ask_adjac_faces

    NX9+VS2012 #include <uf.h> #include <uf_obj.h> #include <uf_modl.h> UF_initialize( ...

  7. iOS 获取音频或是视频的时间

    AVURLAsset* audioAsset =[AVURLAssetURLAssetWithURL:audioFileURL options:nil]; CMTime audioDuration = ...

  8. 使用Devstack部署neutron网络节点

    本文为minxihou的翻译文章,转载请注明出处Bob Hou: http://blog.csdn.net/minxihou JmilkFan:minxihou的技术博文方向是 算法&Open ...

  9. LaTeX+TexStudio安装与使用

    (很多杂志期刊接受LaTeX电子版时会提供自己的模板,只要使用他们的模板即可完美地展现在对应的刊物中) 0x00. 优点 丰富易用的数学公式和特殊符号: 容易生成图表编号.引用.交叉引用.目录: 可以 ...

  10. XStream入门应用程序

    在进入XStream库的细节之前,让我们来看看应用程序操作.在这个例子中,我们创建Student和Address类.还将创建一个Student对象,然后将其序列化到一个XML字符串.然后反序列化的同一 ...