移动端zepto+touch插件
程序员文章站
2022-05-03 18:06:12
...
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no"
/>
<title>Document</title>
<script src="js/touch-0.2.14.js"></script>
<script src="js/zepto.js"></script>
<style>
#app {
width: 100%;
padding: 0.2rem;
background-color: aqua;
}
#app div {
width: 100%;
margin: 0.1rem;
padding: 0.2rem;
border: 1px solid black;
background-color: #ffffff;
font-size: 0.32rem;
}
</style>
<script>
$(function () {
//所有的事件名称都是touch.js声明的
$('.box1').on('tap', function (e) {
console.log(e)
alert('box1被单击了')
})
$('.box2').on('doubletap', function (e) {
console.log(e)
alert('box2被双击了')
})
$('.box3').on('swipe', function (e) {
console.log(e)
alert('box3触发了滑动事件')
})
$('.box4').on('swipeleft', function (e) {
console.log(e)
alert('box4触发了左滑动事件')
})
$('.box5').on('swiperight', function (e) {
console.log(e)
alert('box5触发了右滑动事件')
})
$('.box6').on('swipeup', function (e) {
console.log(e)
alert('box6触发了上滑动事件')
})
$('.box7').on('swipedown', function (e) {
console.log(e)
alert('box7触发了下滑动事件')
})
$('.box8').on('hold', function (e) {
console.log(e)
alert('box8触发了长按事件')
})
})
</script>
</head>
<body>
<div id="app">
<div class="box1">单击事件</div>
<div class="box2">双击事件</div>
<div class="box3">滑动事件</div>
<div class="box4">左滑动事件</div>
<div class="box5">右滑动事件</div>
<div class="box6">上滑动事件</div>
<div class="box7">下滑动事件</div>
<div class="box8">长按事件</div>
</div>
</body>
</html>