触屏Tap模拟事件

触屏的click因为有双击判断所以有200ms的延迟,zepto里的touch.js兼容不好所以tap也没法直接用。

gibhub上有个fastclick太大了。

自己用touched写个简单的模拟tap事件,并在内部加上e.preventDefault();阻止系统默认行为。

	/*
		模拟Tab事件
		@obj:元素
		@callback:回调函数
	*/
	function Tap(obj, callback){
		document.body.addEventListener('touchend',function(e){
			if(typeof callback == 'function' && obj==e.target){callback();}
			//阻止“默认行为”
		    e.preventDefault();
		});		
	}

  

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{width: 100px;height: 100px;background: green;margin:5px;}
	</style>
</head>
<body>
	
	<div class="box" id="box1"></div>
	<div class="box" id="box2"></div>

	<script>

	/*
		模拟Tab事件
		@obj:元素
		@callback:回调函数
	*/
	function Tap(obj, callback){
		document.body.addEventListener('touchend',function(e){
			if(typeof callback == 'function' && obj==e.target){callback();}
			//阻止“默认行为”
		    e.preventDefault();
		});		
	}

	Tap(document.getElementById('box1'),function(){
		console.log('tab1');
	});

	Tap(document.getElementById('box2'),function(){
		console.log('tab2');
	});

	Tap(document.body,function(){
		console.log('body');
	});
	</script>
</body>
</html>

  

posted @ 2015-06-07 19:56  dtdxrk  阅读(421)  评论(0编辑  收藏  举报