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

一、什么是click点透

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

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

具体html代码如下：

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>移动端点透问题</title>

  <style>

    *{

      margin: 0px;

      padding:0px;

    }

    #div1{

      width: 300px;

      height: 300px;

      background-color: rgba(255,0,0,0.25);

    }

    #div2{

      width: 240px;

      height: 240px;

      background-color: yellow;

      position: absolute;

      left: 30px;

      top: 30px;

      z-index: -1;

    }

    #console{

      border: 1px solid green;

      position: absolute;

      top: 300px;

      width: 100%;

    }

  <style>

</head>

<body>

  <div id="div1"></div>

  <div id="div2">

     <a href="www.baidu.com">www.baidu.com</a>

  </div>

  <div id="console"></div>

</body>

</html>

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

var div1 = document.getElementByIdx_x("div1");

    var div2 = document.getElementByIdx_x('div2');

    var con = document.getElementByIdx_x('console');

    function handle(e){var tar = e.target,

　　　　　　　　　 eve = e.type;

      var ele = document.createElement_x("p");

      ele.innerHTML = "target:"+ tar.id + " event:" + eve ;

      con.appendChild(ele);

      if(tar.id === "div1"){

        div1.style.display = "none";

      }

    }

    div1.addEventListener("touchend",handle);

    div1.addEventListener("touchstart",handle);

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

target:div1 event:touchstart

target:div2 event:touchend

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

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

div2.addEventListener('click',handle);

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

target:div1 event:touchstart

target:div1 event:touchend

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的区别如下：

.touchstart：在这个DOM（或冒泡到这个DOM）上手指触摸开始即能立即触发

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

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

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

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

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

三、解决方案

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

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

if(eve == "touchsend") e.preventDefault();

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

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

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

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

转载自：http://www.tuicool.com/articles/q2YnUza

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

  1. 移动端click点透bug

    移动端click点透bug click点透bug有一个特定的产生情况: 当上层元素是tap事件,且tap后消失,下层元素是click事件.这个时候,tap上层元素的时候就会触发下层元素的click事件 ...

  2. web移动前端的click点透问题

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

  3. 移动端的click

    移动端的click 移动端click和touch的关系 搬运 http://segmentfault.com/q/1010000000691822 手指在屏幕上滑动时 各个touch的触发顺序 tou ...

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

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

  5. 移动端的click事件延迟触发的原理是什么？如何解决这个问题？

    移动端的click事件延迟触发的原理是什么?如何解决这个问题? 原理 :移动端屏幕双击会缩放页面 300ms延迟 会出现点透现象 在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹 ...

  6. 【原】移动端vue页面点透事件 - 分析与解决

    近期项目遇到了vue页面事件被带到下一个页面的问题,也就是我们常说的点透事件,主要表现在android机器上,花了不少时间折腾,简单做下总结~ vue页面之间的切换通过Vue Router的route ...

  7. 关于移动端的Click事件

    在移动端执行Click事件,通常情况出现有300毫秒的延迟,为防止这种不必要的延迟效果,我们可以换种方式来实现,同样达到快速执行Click事件的效果. 先了解一下移动端Click的执行顺序: touc ...

  8. 移动端300ms与点透总结

    300ms,主要发生在mobile 为啥会出现300ms延迟现象 浏览器想知道用户是否dobule tap(双击缩放) 下列情况不会出现300ms延迟 桌面浏览器 meta的viewport设置了us ...

  9. 移动端APP列表点透事件处理方法

    关于点透事件这里不再赘述,如果不清楚的可以上网搜一搜,或者看小火柴的这篇文章. 这里是自己在做移动端时,在列表滑动的时候,遇到的点透问题.出现这个问题的来由是因为在转场的时候,各个手机的转场效果不一样 ...

随机推荐

  1. WordCount编码和测试

    WordCount编码和测试 项目地址:https://github.com/handsomesnail/WordCount PSP表格 PSP2.1 PSP阶段 预估耗时(分钟) 实际耗时(分钟) ...

  2. asp.net core 之多语言国际化自定义资源文件

    先说说 asp.net core 默认的多语言和国际化. 官方文档 一:基本使用方法 先要安装 包 Microsoft.AspNetCore.Mvc.Localization (依赖 Microsof ...

  3. 前端的异步解决方案之Promise和Await-Async

    异步编程模式在前端开发过程中,显得越来越重要.从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题.随着ES6新标准的出来,处理异步数据流的解决方案又有了新的变化.Promise就是这其 ...

  4. 编译 ambari 2.7.3

    官方给的教程比较简单,需要事先安装的工具也是这里列一点,那里列一点.在此记录一下编译要点(在 centos 7 下). 1. 事先需要安装的工具 yum install -y git svn node ...

  5. Java开发环境配置（JDK+Tomcat+MyEclipsed）

    前言 这个项目一开始,我只能说我把自己整的很无语,所以我只能在调整心态的基础上,重新把思路缕了一遍,好了,接下来就说java运行环境以及发布运行方法还有SSH环境配置. 内容 本次配置用到的安装包: ...

  6. python内置函数print输出到文件,实现日志记录的功能

    # bulid time 2018-6-22 import os import time def log(*args, **kwargs): # *kargs 为了通用 可不传 rule = &quo ...

  7. Oracle中merge into语法

    merge into 语句就是insert和update的一个封装,简单来说就是: 有则更新,无则插入 下面说怎么使用 MERGE INTO table_Name  T1(匿名) using (另外一 ...

  8. swift基础语法之——变量和常量

    swift使用let关键字来定义常量,使用var来定义变量,变量在使用前必须初始化(赋初始值) swift是类型安全语音,即不同类型的变量不能一起运算,必须转成同一类型才可以 变量的类型在声明时不必给 ...

  9. Eclipse导入GitHub项目两处报错处理

    1.项目出现Could not calculate build plan:pligin 错误解决办法: 删除本地.m2仓库中 org.apache.maven.plugins:maven-resour ...

  10. redis启动后出现"WARNING you have Transparent Huge Pages (THP) support enabled in your kernel"问题

    问题描述:启动redis后出现:WARNING you have Transparent Huge Pages (THP) support enabled in your kernel. This w ...