JS实现长按事件功能移动和pc端

长按点击功能主要用到的是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>

<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>

JS实现长按事件功能 移动和pc端

JS实现长按事件功能移动和pc端