H5移动端点击事件穿透问题解决

最近有遇到前端事件点击穿透的问题，拿来跟大家分享一下。

1.问题描述：
情景一：蒙层点击穿透问题，点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件。
情景二：跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转。
情景三：另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发了。
情景四：不过概率很低，就是新页面中对应位置元素恰好是a标签，然后就发生连续跳转了。
2.解决方法：
方法一：书写规范问题，不要混用touch和click。既然touch之后300ms会触发click，只用touch或者只用click就自然不会存在问题了。
方法二：吃掉（或者说是消费掉）touch之后的click，依旧用tap，只是在可能发生点击穿透的情形做额外的处理，拿个东西来挡住、或者tap后延迟350毫秒再隐藏mask、pointer-events、在下面元素的事件处理器里做检测（配合全局flag）等。
3.个人建议：
此处，我所使用的是方法一，这样是让自己的书写更规范，所以移动端我统一使用Tap事件。
4.特殊情况的处理：
4.1 在点击事件后面加@tap.stop=“search()”，此处的是VUE的开发示例，不同的编程可以自行调整。
4.2 在点击事件后面加@tap=“search($event)”

search:function(e){	
	e.preventDefault();
}