提到移动端点透问题，就不得不先提到移动端的click事件300ms延迟问题

一、移动端click事件300ms延迟问题

在移动端执行click事件时，通常移动端的浏览器会延迟300ms来触发对应的事件，这个问题的原因是：为了判断用户是否是双击，因为在移动端浏览器刚开始的时候，为了提升用户体验感，开发了双击缩放和双击滚动等默认行为，在之前的web开发中，体验并不明显，在当前运行速度和用户体验至上的时代，这个问题表现的特别严重。

移动端click事件300ms延迟解决方案

1. 添加meta标签,阻止用户双击缩放，并限制视口宽度

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

2. 设置CSStouch-action
   CSS属性 touch-action 用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作（比如浏览器自带的划动、缩放等）

* {
  touch-action: none;
}

3. fastclick.js
   fastclick.js- github网址
   移动端事件触发顺序：在移动端，手指点击一个元素，会经过：touchstart=> touchmove => touchend =>click
fastclick.js的原理是：FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即触发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉。
   在原生js中可以如下使用：

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

在jquery或zpeto中可以如下使用：

$(function() {
    FastClick.attach(document.body);
});

在cli工具中(require或者import)

const FastClick = require('fastclick');
// import FastClick = require('fastclick');
FastClick.attach(document.body, options);

二、移动端点透问题

点透问题出现的场景

当A/B两个层上下z轴重叠，上层的A点击后消失或移开（这一点很重要），并且B元素本身有默认click事件（如a标签）或绑定了click事件。在这种情况下，点击A/B重叠的部分，就会出现点透的现象。

总结如下：

1. A/B两个层上下z轴重叠（上下重叠，A盖着B）。
2. 上层的A点击后消失或移开。（这一点很重要）
3. B元素本身有默认click事件（如a标签） 或 B绑定了click事件。

点透问题的出现原因

点透问题出现的原因就是因为我们上边说过的移动端click事件300ms延迟问题，当点击上层元素时，先触发touchstart事件，然后在300ms后会触发click事件，而此时上层元素已经消失，所以下边的元素会触发click事件，这就是点透

点透问题的解决方案

1. 使用click,解决300ms延迟问题 (解决了300毫秒延迟问题即解决了点透问题)
2. 给上面元素加preventDefault()

button.ontouchstart = function(ev){
    let oEvent = ev || event;
    this.style.display = 'none';
    oEvent.preventDefault();
    console.log(1)
}
ul.onclick = function(){
    console.log(2)
}

3. 使用一个(透明)遮罩层，屏蔽所有事件，然后400ms(对于IOS来说是个理想值)后自动隐藏
4. 下层避开click事件，如a链接改为span等标签，使用js跳转页面