【解决】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

 


阅读本文后,您的心情是:
 
恶心
愤怒
强赞
感动
路过
无聊
雷囧
关注
知识共享许可协议
评论(0) 浏览(50939) 引用(0)
引用地址:http://blog.baiwand.com/tb.php?sc=845d05&id=226
Tags:
【经验】在Chrome apps中如何加载外部图片资源 »

Blogger

  • blogger
  • 天之骄子
  • 职位:研发工程师
    铭言:
    阳光与欢乐同在,
    与我同在
    主页:
    blog.baiwand.com

分类目录

日志归档

主题标签

数据统计

  • 日志:151篇
  • 评论:45条
  • 碎语:264条
  • 引用:0条

链接表

随机日志 »

最新日志 »

最新评论 »

标签云 »

订阅Rss
sitemap