touch 事件
<!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>
我是Eric,手机号是13522679763
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！