触屏Tap模拟事件

时间:2023-03-09 22:32:29
触屏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>