JS实现长按事件功能
长按点击功能主要用到的是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>
效果图：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！