触屏Tap模拟事件

最新推荐文章于 2023-05-26 10:38:27 发布

weixin_34356138

最新推荐文章于 2023-05-26 10:38:27 发布

阅读量276

点赞数

触屏的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>

关注博主即可阅读全文