JS实现长按事件功能
长按点击功能主要用到的是onmousedown、onmouseup、setTimeout()、clearTimeout()事件移动端中则是ontouchstart、ontouchend
·
长按点击功能主要用到的是onmousedown、onmouseup、setTimeout()、clearTimeout()事件
移动端中的事件则是ontouchstart、ontouchend
移动端中只需要根据示例代码将onmousedown替换成ontouchstart、onmouseup换成ontouchend
思路：
鼠标左键按住，延迟1秒后执行定时器，如果在这1秒内鼠标左键释放，则清除定时器；
<div onmousedown="down()" onmouseup="up()">长按事件</div>
function down(){
time=setTimeout(()=>{
console.log("长按事件");
},1000)
}
function up(){
clearTimeout(time);
}
基本的长按事件已经完成；但在平时的需求中，不仅要求有长按功能，还不能缺少单击事件；
可以加一个lock变量作为控制长按与单击的锁
鼠标点击时onmousedown的事件是最先执行，鼠标释放时执行执行onmouseup，最后才执行onclick事件。
<div onmousedown="down()" onmouseup="up()" onclick="cli()">长按与单击事件</div>
let time="";
let lock=true;
function down(){
time=setTimeout(()=>{
console.log("长按事件");
lock=false;
},1000)
}
function up(){
clearTimeout(time);
//鼠标释放时让lock异步执行，setTimeout因为异步任务，所以会放到任务队列最后执行，让click事件先执行了
setTimeout(()=>{
lock=true;
})
}
function cli(){
if(lock){
console.log("单击事件");
}
}
示例：
长按让进度条一点一点加、单击弹出当前进度条的值
<!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>Document</title>
</head>
<body>
<div onmousedown="down()" onmouseup="up()" onclick="cli()">长按事件</div>
<progress value="0" max="100"></progress>
<!-- <button ontouchstart="down()" ontouchend="up()" onclick="cli()">点击</button> -->
<script>
let progress=document.getElementsByTagName('progress')[0];
let time="";
let lock=true;
function down(){
time=setInterval(()=>{
lock=false;
progress.value+=5
},1000)
}
function up(){
clearInterval(time);
setTimeout(()=>{
lock=true;
})
}
function cli(){
if(lock){
alert(progress.value);
}
}
</script>
</body>
</html>
效果图：
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
10
0- 0
已为社区贡献6条内容
所有评论(0)