在移动端开发中，有时会出现click点透的问题。

一、什么是click点透

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

tips：以下举例仅针对webkit内核浏览器，所有效果需要在移动端进行查看（PC端不支持touch事件）。

具体html代码如下：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>移动端点透问题</title>
  6.     <style>
  7.         *{
  8.             margin: 0px;
  9.             padding:0px;
  10.         }
  11.         #div1{ /*红色半透明遮盖层A*/
  12.             width: 300px;
  13.             height: 300px;
  14.             background-color: rgba(255,0,0,0.25);
  15.         }
  16.         #div2{ /*黄色内容层B*/
  17.             width: 240px;
  18.             height: 240px;
  19.             background-color: yellow;
  20.             position: absolute;
  21.             left: 30px;
  22.             top: 30px;
  23.             z-index: -1;
  24.         }
  25.         #console{ /*绿色状态输出框*/
  26.             border: 1px solid green;
  27.             position: absolute;
  28.             top: 300px;
  29.             width: 100%;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div id="div1"></div>
  35.     <div id="div2">
  36.        <a href="www.baidu.com">www.baidu.com</a>
  37.     </div>
  38.     <div id="console"></div>
  39. </body>
  40. </html>

在“移动端”，点击事件通常采用touch相关事件来获取高效率。现有需求，点击遮盖层A则隐藏A（点击后隐藏，这一点很重要），则相关javascript代码如下：

  1.      var div1 = document.getElementById("div1");
  2.         var div2 = document.getElementById('div2');
  3.         var con = document.getElementById('console');
  4.         function handle(e){var tar = e.target,
    　　　　　　　　　 eve = e.type;
  5.             var ele = document.createElement("p");
  6.             ele.innerHTML = "target:"+ tar.id + " event:" + eve ;
  7.             con.appendChild(ele);
  8.             if(tar.id === "div1"){
  9.                 div1.style.display = "none";
  10.             }
  11.         }
  12.         div1.addEventListener("touchend",handle);
  13.         div1.addEventListener("touchstart",handle);

这段简单的代码在 C区域外点击时是没有任何问题的，页面下方的log记录控制台内会出现如下内容：

  1. target:div1 event:touchstart
  2. target:div2 event:touchend

然而，当在C区域进行点击罩层A的时候，会发现跳到百度页面了，也就是，本来点击A，但是却透过A，点击到了B里的链接！这就是传说中的 click点透。

为了更清楚的看到这个过程，我们为B绑定click事件，即如果B触发了click事件，那么说明，在A上的点击最终点到了B上。在上面javascript清单上添加一行代码如下：

  1. div2.addEventListener('click',handle);

点击B区域，可以看到页面下方的log记录控制台内出现如下内容：

  1. target:div1 event:touchstart
  2. target:div1 event:touchend
  3. target:div2 event:click

可见，在div1的事件触发完毕后，div2也就是B区域神奇的捕获到了click事件，而事实上我们只点击了div1。

二、点透出现的场景

刚才举例说明了什么是点透，其实点透的出现场景可以总结如下：

1.A/B两个层上下z轴重叠。

2.上层的A点击后消失或移开。（这一点很重要）

3.B元素本身有默认click事件（如a标签） 或 B绑定了click事件。

在以上情况下，点击A/B重叠的部分，就会出现点透的现象。

二、为什么会出现点透

click延迟，延迟，还是延迟。

在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟，具体touchstart与click的区别如下：

  1. 1.touchstart：在这个DOM（或冒泡到这个DOM）上手指触摸开始即能立即触发
  2. 2.click：在这个DOM（或冒泡到这个DOM）上手指触摸开始，且手指未曾在屏幕上移动（某些浏览器允许移动一个非常小的位移值），且在这个在这个dom上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短（某些浏览器不检测间隔时间，也会触发click）才能触发

也就是说，事件的触发时间按由早到晚排列为：touchstart 早于 touchend 早于 click。亦即click的触发是有延迟的，这个时间大概在300ms左右。

由于我们在touchstart阶段就已经隐藏了罩层A，当click被触发时候，能够被点击的元素则是其下的B元素，根据click事件的触发规则：

  1. 只有在被触发时，当前有click事件的元素显示，且在面朝用户的最前端时，才触发click事件。

由于B绑定了click事件（或者B本身默认存在click事件），所以B的click事件被触发，产生了点透的情况。

三、解决方案

1.对于B元素本身没有默认click事件的情况（无a标签等），应统一使用touch事件，统一代码风格，并且由于click事件在移动端的延迟要大很多，不利于用户体验，所以关于触摸事件应尽量使用touch相关事件。

2.对于B元素本身存在默认click事件的情况,应及时取消A元素的默认点击事件，从而阻止click事件的产生。即应在上例的handle函数中添加代码如下：

  1. if(eve == "touchend") e.preventDefault();

3.对于遮盖浮层，由于遮盖浮层的点击即使有小延迟也是没有关系的，反而会有疑似更好的用户体验，所以这种情况，可以针对遮盖浮层自己采用click事件，这样就不会出现点透问题。

四、现有解决方案框架（库）

1. 众所周知，zepto的tap事件是有点透问题的，但是最新版的zepto已经修复了这个问题。

2. 在zepto修复问题之前，有fastclick、hammer等通用库可以使用。

其中最常使用的还是fastclick，地址 ：https://github.com/ftlabs/fastclick

五、其他推荐阅读

1.在手持设备上使用 touchstart 事件代替 click 事件是不是个好主意？

2.【读fastclick源码有感】彻底解决tap“点透”，提升移动端点击响应速度

web移动前端的click点透问题的更多相关文章

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

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

  2. 05. Web大前端时代之：HTML5+CSS3入门系列~H5 多媒体系

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...

  3. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  4. 08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...

  5. AMD和RequireJS初识----优化Web应用前端(按需动态加载JS)

    RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用Re ...

  6. 移动 H5（PC Web）前端性能优化指南

    原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_me ...

  7. 移动端的click点透问题

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

  8. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  9. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

随机推荐

  1. Js的引用关系示例和总结

    三种引用(指针引用)关系,借助引用关系可以形成复杂的链关系,巧妙借助链关系可以实现收放自如,形散神不散的神奇效果,jquery就是其中一例: 1.对象指向属性;        2.a=b(b是对象,a ...

  2. mysql中字段类型转换排序

    表中字段server_id是varchar类型,现在我们查询数据时想以server_id排一下序,排序后的结果 select server_id from cardserver where game_ ...

  3. 笔记本(WIN7|XP)发射wifi信号 当无线路由使用

    Windows7系统 第一步:是你的电脑上要有两个网卡一个有线一个无线(笔记本应该都有)台式机可以考虑买个USB无线网卡(50左右) 第二步:win+R  CMD  输入(只输入红色部分) netsh ...

  4. 阶乘之和--nyoj91

    描述 给你一个非负数整数n,判断n是不是一些数(这些数不允许重复使用,且为正数)的阶乘之和,如9=1!+2!+3!,如果是,则输出Yes,否则输出No: 输入 第一行有一个整数0<m<10 ...

  5. Web前端开发基础 第四课（CSS元素分类）

    元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...

  6. Windows NT驱动程序的基本结构和实例

    Windows驱动程序分为两类:一类是不支持即插即用功能的NT式驱动程序:另一类是支持即插即用功能的WDM驱动程序. NT式驱动的基本结构: 1)驱动加载过程与驱动入口函数DriverEntry: 驱 ...

  7. XPath提取xml文档数据

    package itcast.dom4j; import java.io.File; import org.dom4j.Document; import org.dom4j.DocumentExcep ...

  8. 【应用笔记】【AN004】VB环境下基于RS-485的4-20mA电流采集

    版本:第一版作者:周新稳 杨帅 日期:20160226 =========================== 本资料高清PDF 下载: http://pan.baidu.com/s/1c1uuhLQ ...

  9. Thinking in Java——笔记(6)

    Access Control A piece of work isn't good until it's been rewritten, often many times. Thus a primar ...

  10. iOS开发-Masonry简易教程

    关于iOS布局自动iPhone6之后就是AutoLayOut,AutoLayOut固然非常好用,不过有时候我们需要在页面手动进行页面布局,VFL算是一种选择,如果对VFL不是很熟悉可以参考iOS开发- ...