解决移动端点击穿透问题_h5实现移动端点击事件穿透的多种解决方案
移动端点透点透现象出现的场景:
当A/B两个层上下z轴重叠，上层的A点击后消失或移开（这一点很重要），并且B元素本身有默认click事件（如a标签）或绑定了click事件。在这种情况下，点击A/B重叠的部分，就会出现点透的现象。点透现象出现的原因：
zepto的tap事件是通过兼听绑定在document上的touch事件来完成tap事件的模拟的，并且tap事件是冒泡到document上触发的！！！在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟，具体touchstart与click的区别如下：touchstart：在这个dom（或冒泡到这个DOM）上手指触摸开始即能立即触发；
click：在这个DOM（或冒泡到这个DOM）上手指触摸开始，且手指未曾在屏幕上移动（某些<a href=”http://”>浏览器</a>允许移动一个非常小的位移值），且在这个DOM上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短（某些浏览器不检测间隔时间，也会触发click）才能触发
点透现象解决方案：
解决方案一：来得很直接github上有个fastclick可以完美解决引入fastclick.js，因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );$(function() {
FastClick.attach(document.body);
});var FastClick = require(‘fastclick‘);
FastClick.attach(document.body, options);$("#aa").on("touchend", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});解决方案三：延迟一定的时间(300ms+)来处理事件
$("#aa").on("tap", function (event) {
setTimeout(function(){
//很多处理比如隐藏什么的
},320);
});解决方案四： 理论上上面的方法可以完美的解决tap的点透问题，如果真的倔强到不行，改用click。特别是对于遮盖浮层，由于遮盖浮层的点击即使有小延迟也是没有关系的，反而会有疑似更好的用户体验，所以这种情况，可以针对遮盖浮层自己采用click事件，这样就不会出现点透问题。 作者-豆豆蛙。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
