标签：function console bind alert 事件 touch btn
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>attr-prop</title><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>
标签：function,console,bind,alert,事件,touch,btn 来源： https://www.cnblogs.com/eric-share/p/15905000.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。