【解决】zepto的tap“点透”问题终极解决方案
zepto点透问题一直是个头疼的问题,此处不具体分析点透产生的原因,仅介绍解决方案。
网上已经有很多解决方案:
方案一:来得很直接github上有个fastclick可以完美解决https://github.com/ftlabs/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>
具体查看演示:(源码可以右键查看源代码)
点击查看DEMO
阅读本文后,您的心情是:
恶心
愤怒
强赞
感动
路过
无聊
雷囧
关注