下面我们来看一篇关于zepto的tap“点透”问题终极解决方案，如果各位碰到此类的问题可以和小编一起来看看吧，具体的解决方案如下。
zepto点透问题一直是个头疼的问题，此处不具体分析点透产生的原因，仅介绍解决方案。
网上已经有很多解决方案：
方案一：来得很直接github上有个fastclick可以完美解决
方案二：用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()
方案三：延迟一定的时间(300ms+)来处理事件
理论上上面的方法可以完美的解决tap的点透问题，如果真的倔强到不行，用click
首先方案一、方案二，要么引入一个库，要么替换掉tap事件，繁琐，头疼。方案三，点击延迟也不太好吧，着急点的用户还以为自己没点上呢，另外延迟300ms在IOS上是不够的，400ms是个理想值。
【终极方案】（自己可以依照自己的需求进行扩展）：
原理就是：用户点击的时候“弹出”一个顶层DIV，屏蔽掉所有事件传递，然后定时自动隐藏。
| 代码如下 |
|
|
CSS:
<style type="text/css">
/*Touch Fix*/
#touchFix{visibility: hidden;width: 100%;height: 100%;position: absolute;left: 0px;top: 0px;z-index: 9999;}
</style>
JS:
<script type="text/javascript">
var touchFixBox=$('#touchFix');
//Touch Fix Event for Android
var touchFix=(function(){
var show=function(callback){
touchFixBox.css('visibility','visible');
if(typeof callback=='function'){
callback();
}
}
var hide=function(callback){
setTimeout(function(){
touchFixBox.css('visibility','hidden');
if(typeof callback=='function'){
callback();
}
},400);
}
var auto=function(callback){
show();
hide(callback);
}
return {
show:show,
hide:hide,
auto:auto
}
}());
</script>
|
