移动端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. PHP - 实现 strStr()

    实现 strStr() 函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始).如果不存在,则返 ...

  2. ubuntu下网页视频或音频无法播放

    有时,网页的音频或视频内容在 Firefox 下无法正常下载和播放.所需的插件没找到.过期.被阻止.和其他插件或扩展冲突,或者是内容由于某种原因被阻止.本文会帮助你解决这些问题. Flash 插件 F ...

  3. 解决MySQL登录密码正确却提示错误-1045的方法

    MySQL密码正确却无法本地登录-1045 Access denied for user 'root'@'localhost' (using password:YES MySQL密码正确却无法本地登录 ...

  4. JUC 一 ReentrantReadWriteLock

    java.util.concurrent.locks ReentrantLock是独占锁,一种相对比较保守的锁策略,在这种情况下任何"读/读"."读/写".&q ...

  5. splay 模板 洛谷3369

    题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入 xx 数 删除 xx 数(若有多个相同的数,因只删除一个) 查询 xx 数的排名(排名定义为比当前数小的数 ...

  6. 牛客多校第六场 G Is Today Friday? 蔡勒公式/排列

    题意: 有一堆日期,这些日期都是星期五,但是数字被映射成了字母A~J,现在让你求逆映射,如果存在多种答案,输出字典序最小的那个. 题解: 用蔡勒公式解决关于星期几的问题. 对于映射,可以用笔者刚刚学会 ...

  7. Java-javaFx库运用-时钟显示

    JavaFx是开发Java GUI程序的新框架.JavaFX应用可以无缝地在桌面或web浏览器中运行.具有内建的2D.3D动画支持,以及视频和音频的回放功能,可以作为一个应用独立运行或者在浏览器中运行 ...

  8. Centos6.5安装rar5.3

    linux下使用最多的压缩工具是gzip,zip等,如果需要使用rar,就必须编译安装了,以下是编译安装rar教程: 一.安装支持库yum install -y gcc gcc-c++ autocon ...

  9. 《转》python8元组

    转自 http://www.cnblogs.com/BeginMan/p/3156235.html 一.元组特性 1.类似列表,但不可变类型,正因如此,它可以做一个字典的key2.当处理一组对象时,这 ...

  10. 1-MySQL高级-视图

    视图 1. 问题 对于复杂的查询,往往是有多个数据表进行关联查询而得到,如果数据库因为需求等原因发生了改变,为了保证查询出来的数据与之前相同,则需要在多个地方进行修改,维护起来非常麻烦 解决办法:定义 ...