思路：通过mousedown来实现，超过时间即长按，用setInterval来计时，未超过就是单击事件，并清除计时器。代码如下：
<!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>
<style>
.redC{
color: #FF0000FF;
}
span{
cursor: pointer!important;
}
</style>
<body>
<div>长按事件</div>
<progress value="0" max="100"></progress>
<span class="class1" onm ousedown="down()" onm ouseup="up()" onclick="cli(event)">点赞</span>
<span class="class2" onclick="cli(event)">投币</span>
<span class="class3" onclick="cli(event)">收藏</span>
<!-- <button ontouchstart="down()" ontouchend="up()" onclick="cli()">点击</button> -->
<script>
let dianZan=document.getElementsByClassName('class1')[0];
let dianZan1=document.getElementsByClassName('class2')[0];
let dianZan2=document.getElementsByClassName('class3')[0];
let time="";
let lock=true;
function down(){
time=setInterval(()=>{
lock=false;
redFun()
},1000)
}
function up(){
clearInterval(time);
setTimeout(()=>{
lock=true;
})
}
function cli(node){
if(lock){
console.log(41,node)
// alert("单机");
if(node.target.style.color){
node.target.style.color = ""
}else {
node.target.style.color = "#FF0000FF"
}
}
}
function redFun(){
dianZan.style.color = "#FF0000FF"
dianZan1.style.color = "#FF0000FF"
dianZan2.style.color = "#FF0000FF"
}
</script>
</body>
</html>标签：FF0000FF,node,style,color,一键,三联,let,哔哩,function From： https://www.cnblogs.com/hhcome/p/17645847.html