今天工作中遇到的两个问题。

今天在完成移动端手机页面的时候，写遮罩层及其上面的弹出菜单效果。

遇到的第一个问题就是：当点击右上角的菜单图标，弹出遮罩层和菜单选项。点击遮罩层或者再次点击菜单图标，遮罩层和弹出菜单就会消失。因为如果将display设置为none的函数绑定在遮罩层上，因为html中弹出菜单是遮罩层的子节点，那么点击弹出菜单同样因为冒泡，触发两者不再显示的效果。

解决方案：通过e.target目标对象捕捉鼠标的操作元素，当e.target目标对象的class属性值与遮罩层的class属性值相同的，即两者是同一元素节点的时候，则触发display为none的效果，否则不作任何操作。

遇到的第二个问题就是点击事件中的点穿问题。该页面中的卡片轮播个人信息部分给绑定了onclick事件，而在遮罩层中绑定了tap事件。从而在点击个人信息上方的遮罩层时，会触发个人信息部分的onclick事件。这是典型的点击事件中的点穿问题。

首先了解一下以下部分：

事件触发顺序

　　PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。一次点击行为，可被拆解成：mousedown -> mouseup -> click 三步。

　　手机上没有鼠标，所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend，注意手机上并没有tap事件。手指触发触摸事件的过程为：touchstart -> touchmove -> touchend。

　　手机上没有鼠标，但不代表手机不能响应mouse事件（其实是借助touch去触发mouse事件）。也就是说在移动端的click事件可以拆解为：touchstart -> touchmove -> touchend -> click。

　　浏览器在 touchend 之后会等待约 300ms ，如果没有 tap 行为，则触发 click 事件。 而浏览器等待约 300ms 的原因是，判断用户是否是双击（double tap）行为，双击过程中就不适合触发 click 事件了。 由此可以看出 click 事件触发代表一轮触摸事件的结束。

　　上面说到原生事件中并没有 tap 事件，可以参考经典的 zepto.js 对 singleTap 事件的处理。见源码 136-143 行

　　可以看出，singleTap 事件的触发时机 —— 在 touchend 事件响应 250ms 无操作后，触发singleTap。

　　因此点击穿透的现象就容易理解了，在这 300ms 以内，因为上层元素隐藏或消失了，由于 click 事件的滞后性，同样位置的 DOM 元素触发了 click 事件（如果是 input 则触发了 focus 事件）。在代码中，给我们的感觉就是 target 发生了飘移。

解决

      1. 触摸结束时 touchend 事件触发时，preventDefault()。看上去好像没有什么问题，但是，很遗憾的是不是所有的浏览器都支持。

　　2. 禁止页面缩放 通过设置meta标签，可以禁止页面缩放，部分浏览器不再需要等待 300ms，导致点击穿透。点击事件仍然会触发，但相对较快，所以 click 事件从某种意义上来说可以取代点击事件， 而代价是牺牲少数用户（click 事件触发仍然较慢）的体验。

<meta name="viewport" content="width=device-width, user-scalable=no">

IE 10可以用 CSS 取消点击穿透的延迟：

html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

IE 11+ 可以用 touch-action: manipulation; 属性来阻止元素的双击缩放。

　　3. CSS3 的方法 虽然主要讲的是事件，但是有必要介绍一个 CSS3 的属性 —— pointer-events。

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit;

pointer-events 属性有很多值，有用的主要是 auto 和 none，其他属性为 SVG 服务。

查看浏览器支持情况 可见移动端开发还是可以用的。

属性	含义
auto	默认值，鼠标或触屏事件不会穿透当前层
none	元素不再是target，监听的元素变成了下层的元素（如果子元素设置成 auto，点击子元素会继续监听事件）

　　4.延长消失事件 可以利用jquery的fadeout，设置事件大于300ms。