<style> body{ height: 3000px; }
#btn{ touch-action: none; }
.btn2{ width: 200px;height: 200px;background-color: aqua; }
#box3{ width: 100px; height: 100px; background: rebeccapurple; }
#btn{ width: 150px; height: 100px; } </style> </head> <body> <button class="btn1">按钮1</button> <div class="btn2">按钮2</div> <button class="btn3">按钮3</button>
<hr>
<div id="box1" class="box">按钮1</div> <div id="box2" class="box">按钮2</div> <div id="box3" class="box">按钮3</div> <button id="btn" class="btn">button</button>
<script src="../zepto.js"></script> <script src="../touch.js"></script> <script> $(function(){ /** * on() * off() * bind() * one() * trigger() 触发 bind 绑定的事件 * unbind() * * // zepto 独特的事件 * tap() 点击事件 * singleTap() 单机事件 * doubleTap() 双击事件 * longTap() 长按事件 * 滑动事件 swipe swipeLeft swipeRight swipeUp swipeDown * */ // $('.btn1').on('touchstart',function(){ // alert('on触发的事件') // }) // // 取消所有的事件 // $('.btn1').off()
// // $('.btn2').bind('touchstart',function(){ // // alert('bind触发的事件') // // })
// $('.btn2').bind('myTouch',function(){ // alert('bind触发的事件') // })
// $('.btn2').unbind() // $('.btn2').trigger('myTouch')
// // 只执行一次 // $('.btn3').one('touchstart',function(){ // alert('只执行一次') // })
// ---------------------------------------
// 点击事件 $('#box1').tap(function(){ alert('tap触发的事件') })
// singleTap() 单机事件 $('#box2').singleTap(function(){ alert('单机的事件') }) // doubleTap() 双击事件 $('#box2').doubleTap(function(){ alert('双击的事件') })
// longTap() 长按事件 当一个元素按住被超过 750ms 触发 $('#box3').longTap(function(){ alert('长按的事件') })
// 滑动事件 swipe swipeLeft swipeRight swipeUp swipeDown // $('#btn').swipe(function(){ // console.log('swipe'); // })
$('#btn').swipeLeft(function(){ console.log('swipeLeft'); })
$('#btn').swipeRight(function(){ console.log('swipeRight'); })
$('#btn').swipeUp(function(){ console.log('swipeUp'); }) $('#btn').swipeDown(function(){ console.log('swipeDown'); })
}) </script>
</body> </html>