zepto touch事件
击打事件
1、tap() 点击/敲打事件,只要点击就会触发,无论单双击
2、singleTap() 单击事件
3、doubleTap() 双击事件
3、longTap() 长按事件,当按下事件超过750ms时触发,长按过程中只会触发一次
滑动事件(以30像素为基准)
4、swipe() 滑动事件,手指滑动默认为翻页,所以要执行滑动事件,要禁止滑动事件的默认行为touch-action:none;默认为auto开启
5、swipeLeft() 左滑动事件
6、swipeRight() 右滑动事件
7、swipeUp() 上滑动事件
8、swipeDown() 下滑动事件
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>zepto_touch</title>
<style type="text/css">
*{
touch-action:none;
}
.box{
width: 100px;
height: 100px;
background: #FFFF00;
margin: 0 auto;
text-align: center;
line-height: 100px;
}
.btn{
width: 100px;
height: 50px;
background: #FF0000;
border-radius: 10px;
margin: 0 auto;
}
</style>
</head>
<body style="height: 1000px;">
<div id="box" class="box">按钮1</div>
<br />
<div id="box2" class="box">按钮2</div>
<br />
<div id="box3" class="box">按钮3</div>
<button id="btn" class="btn">button</button>
<script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/touch.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#box').tap(function(){console.log(1)});// $('#box').on('tap',function(){...})
$('#box2').singleTap(function(){console.log('单击了一下')});
$('#box3').doubleTap(function(){console.log('双击了一下')});
$('#box3').longTap(function(){console.log('长按了一下')});
$('#btn').swipeDown(function(){console.log('滑动了一下')});
})
</script>
</body>
</html>