之前写项目的时候遇到了一个这样的需求,对于页面上的一个元素做单击/长按,触发不同事件,后面考虑到鲁棒性还是换成单击/双击/三击的形式了,不过这些事件之间的区分给人的印象还是深刻的(其实就是卡在这里太久了,乐),写篇文章记录一下。
单击/长按触发不同事件
<!DOCTYPE html>
<html>
<head>
<title>长按/单击</title>
</head>
<body>
<div id="clickableDiv" style="width: 200px; height: 100px; background-color: #90EE90;"></div>
<script>
var button = document.getElementById('clickableDiv');
var timer = null; // 用于长按检测的计时器
var delay = 500; // 长按的阈值(毫秒)
button.addEventListener('mousedown', function() {
// 当用户按下按钮时,开始计时
timer = setTimeout(function() {
console.log('长按');
timer = null; // 长按事件发生后清除计时器
}, delay);
});
button.addEventListener('mouseup', function() {
// 当用户释放按钮时,检查计时器是否仍然存在
if (timer) {
clearTimeout(timer); // 如果计时器存在,清除它
console.log('单击'); // 并且认为这是一次单击事件
}
});
button.addEventListener('mouseleave', function() {
// 如果在长按过程中鼠标离开了元素,也应该取消长按操作
if (timer) {
clearTimeout(timer);
timer = null;
}
});
</script>
</body>
</html>
单击/双击/三击触发不同事件
<!DOCTYPE html>
<html>
<head>
<title>单击/双击/三击</title>
</head>
<body>
<div id="clickableDiv" style="width: 200px; height: 100px; background-color: #90EE90;"></div>
<script>
var clickCount = 0; // 点击计数
var clickTimer = null; // 计时器
document.getElementById('clickableDiv').addEventListener('click', function() {
clickCount++; // 增加点击计数
if (clickTimer === null) {
// 如果计时器为空,则设置一个计时器
clickTimer = setTimeout(function() {
// 根据点击次数执行操作
if (clickCount === 1) {
console.log('单击');
} else if (clickCount === 2) {
console.log('双击');
} else if (clickCount >= 3) {
console.log('三击');
}
// 重置计数和计时器
clickCount = 0;
clearTimeout(clickTimer);
clickTimer = null;
}, 400); // 设定时间间隔为400毫秒,你可以根据需要调整这个值
}
});
</script>
</body>
</html>