移动端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. Linux统计根分区使用率

    #!/bin/bash # 统计根分区使用率 # 作者: shaohsiung # 时间: // rate=$(df -h | grep "dev/sda3" | awk '{pr ...

  2. windows常用

    host文件位置:C:\Windows\System32\drivers\etc

  3. python pillow模块用法

    pillow Pillow是PIL的一个派生分支,但如今已经发展成为比PIL本身更具活力的图像处理库.pillow可以说已经取代了PIL,将其封装成python的库(pip即可安装),且支持pytho ...

  4. NX二次开发-UFUN按类型遍历名字获取Tag函数UF_OBJ_cycle_by_name_and_type

    NX9+VS2012 #include <uf.h> #include <uf_draw.h> #include <uf_obj.h> #include <u ...

  5. Spring声明式事务的实现方式选择（JDK动态代理与cglib）

    1.简介 Spring声明式事务的具体实现方式是动态决定的,与具体配置.以及事务代理对象是否实现接口等有关. 2.使用JDK动态代理的情况 在满足下面两个条件时,Spring会选择JDK动态代理作为声 ...

  6. Matlab求三重积分

    Matlab求三重积分 求 \(\int_0^1 \int_0^1 \int_0^1 sin(\pi x_1 x_2 x_3) dx_1 dx_2 dx_3\) 代码是: triplequad(@(x ...

  7. Python爬虫-《神雕侠侣》

    Python3.5 爬取<神雕侠侣>http://www.kanunu8.com/wuxia/201102/1610.html 武侠迷,所以喜欢爬取武侠小说 #!/usr/bin/pyth ...

  8. Scrapy的初体验

    上一节安装了python2和python3的开发环境 首先第一步:进入开发环境,workon article_spider 进入这个环境: 安装Scrapy,在安装的过程中出现了一些错误:通常这些错误 ...

  9. VMware Workstation 添加磁盘 挂载目录(centos)

    参考文档: Linux命令大全 需求:测试环境虚拟机某个目录下空间不足,准备通过添加一块磁盘,并将该目录挂载到该磁盘 前面几步在测试服务器上操作的,截图困难,所以网上找了几张设置图 关闭虚拟机(没测试 ...

  10. MySQL查询语句详解，排序、分组、聚合函数、约束

    create database day20; 查询的时候from前面的字段是需要显示出来的内容,后面是条件use day20;create table phones(id int,pinpai var ...