您的位置：首页 > 其它

触屏Tap模拟事件

2015-06-07 19:56 267 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航