移动端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. [转]C# 动态调用 WebService

    通常我们在程序中需要调用WebService时,都是通过“添加Web引用”,让VS.NET环境来为我们生成服务代理,然后调用对应的Web服务.这样是使工作简单了,但是却和提供Web服务的URL.方法名 ...

  2. CSS——外观样式及应用

    CSS注释  CSS规则是使用 /* 需要注释的内容 */ 进行注释的,即在需要注释的内容前使用 “/*” 标记开始注释,在内容的结尾使用 “*/”结束. 例如: p { font-size: 14p ...

  3. flutter 死亡红屏 隐藏

    当组件报错的时候会出现红屏现象,解决办法是覆盖原有的ErrorWidget 用一个空白的组件去替换它 1.main.dart中进行修改 新增覆盖代码: void setCustomErrorPage( ...

  4. （转）OC学习笔记 @property的属性 strong 和 weak 理解

    在ObjectiveC里,用@property访问所有的实例变量.@property有一对属性:strong 和 weak.官方文档里的解释晦涩难懂:Stack Overflow里的用户RDC (ht ...

  5. (转) MySQL中索引的限制

    转:http://book.51cto.com/art/200906/132459.htm 8.4.8  MySQL中索引的限制 在使用索引的同时,还应该了解MySQL 中索引存在的限制,以便在索引应 ...

  6. 秦曾昌人工智能课程---7、决策树集成学习Tree Ensembles

    秦曾昌人工智能课程---7.决策树集成学习Tree Ensembles 一.总结 一句话总结: 其实机器模型减少variance的比较好的方式就是 多个模型取平均值 1.CART是什么? classi ...

  7. ZK4字命令

    zookeeper4字命令:两种方式,1.通过telnet链接服务器,执行stat.2.echo stat|nc xxx.xxx.xxx.xxx 2181效果是一样的conf:zk服务器运行时的基本信 ...

  8. 用python写的自动转发邮件信息模板

    # -*- coding:utf-8 -*- #加密东西 def decrypt(key, s): c = bytearray(str(s).encode("gbk")) n = ...

  9. 基于Netty的RPC架构学习笔记（二）：netty服务器

    文章目录 简介 Netty服务端Hello World案例 举个

  10. sizeof，真正终结版GCC与VC

    在VC6.0中sizeof结果是16.我电脑上装了个linux虚拟机,在虚拟机上GCC中结果是12, 恩不同编译器默认对齐数值不一样. VC 默认为 8 gcc 默认为 4 有个编译参数控制对齐. # ...