移动端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. java带jar编译与运行

    javac -classpath ./wxpay-sdk-0.0.3.jar HttpsTest2.java java -cp .:./wxpay-sdk-0.0.3.jar HttpsTest2

  2. Spring-Security (学习记录六)--采用ehcache缓存UserDetails

    目录 1. spring-security提供了缓存UserDetails的UserDetailsService实现类. 2. 通过配置来完成缓存 UserDetails (使用ehcache) 3. ...

  3. faster-rcnn算法总结

    faster-rcnn的整体流程比较复杂,尤其是数据的预处理部分,流程比较繁琐.我写faster-rcnn系列文章的目的是对该算法的原始版本有个整体的把握,如果需要使用该算法做一些具体的任务,推荐使用 ...

  4. 转-pycharm建立项目

    转自:https://blog.csdn.net/m0_37544464/article/details/79171913 本文针对环境已经配置好的Pycharm建立新项目 1.第一步 2.第二步 在 ...

  5. 5、 postman的鉴权

    什么是鉴权? 鉴权(authentication)是指验证用户是否拥有访问系统的权利.常用的有两种鉴权方式,一种是session鉴权,一种是jwt鉴权,相对而言,后者居多. 实例: 比如有一个添加角色 ...

  6. [21]APUE：线程同步之记录锁（文件）

    [a] 概念 建议锁:在遵循相同记录锁规则的进程/线程间生效,通常用于保证某个程序自身多个进程/线程间的数据一致性 强制锁:意在保证所有进程间的数据一致性,但不一定有效:如不能应对先 unlink 后 ...

  7. 如何在Spring Boot 中动态设定与执行定时任务

    本篇文章的目的是记录并实现在Spring Boot中,动态设定与执行定时任务. 我的开发项目是 Maven 项目,所以首先需要在 pom.xml 文件中加入相关的依赖.依赖代码如下所示: <de ...

  8. 面试系列32 集群部署时的分布式session如何实现

    session是啥?浏览器有个cookie,在一段时间内这个cookie都存在,然后每次发请求过来都带上一个特殊的jsessionid cookie,就根据这个东西,在服务端可以维护一个对应的sess ...

  9. 安装go环境

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~go项目运行时的依赖包安装问题~~~~~~~~~~~~~~~~~~~~~~~~~~~~1.安装go环境 wget https://dl.goog ...

  10. Tomcat调优详解

    前言 在这里告诫一下那些感觉自己啥都会的朋友们,其实你会的可能只是皮毛,不要感觉这个东西以前已经做过了,就不想去做了 其实你还远没有达到精通的地步,遇到以前做过的东西,也要用心的再去做一遍,你可能会从 ...