对于移动端点透事件原理及解决方法

发生条件

  A z-index 大于B，即A显示在B浮层之上；A发生touch，A发生touch后立即消失，B事件绑定click。

原理

  当手指触摸到屏幕的时候，系统生成两个事件，一个是touch，一个是click；touch先执行，touch执行完成后，A事件从文档树上消失了，而且由于移动端click有200ms-300ms的延迟，所以当系统要触发click的时候，发现在用户点击的位置上面，目前离用户最近的元素是B，所以就直接把click事件作用在B元素上了。

原因

  由于click在移动端里有200ms-300ms的延时造成的，对于PC端并没有点透事件，因为在PC端用户使用鼠标点击时，click事件没有延迟。

解决方法

  1.可以在github上引入fastclick，引入fastclick.js，因为fastclick源码不依赖其他库所以你可    以在原生的js前直接加上

  window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );

  如果是require的话：

  var FastClick = require(‘fastclick‘);
FastClick.attach(document.body, options);

2.将onClick事件换成on TouchEnd事件，并阻止默认事件e.preventDefault();

3.延迟一定的时间来处理事件，一般延迟300ms以上

  $("#aa").on("tap", function (event) {
setTimeout(function(){
//很多处理比如隐藏什么的
},320);
});
这种方法其实很好，可以和fadeInIn/fadeOut等动画结合使用，可以做出过度效果

4.在目标页面加入遮罩层

  在目标页面加上一层透明的弹层，使上一个页面的点击在此弹层上失效，具体做法为使用一个 高阶组件，在高阶组件中添加一个定时器，在每个页面加载的时候生成一个弹层，400ms之后消失弹层即可。