长按按钮需自行模拟连续事件，因onclick仅单次触发且浏览器无原生长按事件；须用mousedown启动setInterval、mouseup和mouseleave配对清除定时器，避免内存泄漏与状态混乱。
长按按钮触发连续事件，为什么不能只用 onclick
因为 onclick 只响应单次点击，长按不会重复触发。浏览器原生不把“长按”当独立事件，必须自己检测鼠标/触摸状态并模拟连发逻辑。
常见错误是直接在 onmousedown 里调用 setInterval，但没配对清理，导致多个定时器叠加、内存泄漏、数值乱跳。
- 漏写
onmouseup/onmouseleave清理，松手后还在跑 - 没防抖或初始延迟，一按就猛发，体验卡顿
- 用
let count = 0; setInterval(() => count++, 100)这类累加变量，但没绑定到具体按钮实例，多个按钮互相干扰
setInterval 启动和清除必须成对出现
每个按钮的定时器 ID 要单独保存、单独清除，不能共用一个变量。推荐用闭包或 DOM dataset 存储状态。
<button data-interval-id="">+1</button>
<script>
const btn = document.querySelector('button');
let intervalId = null;
btn.addEventListener('mousedown', () => {
if (intervalId) return; // 防重复启动
let count = 0;
intervalId = setInterval(() => {
count++;
console.log('触发第', count, '次');
}, 150);
});
btn.addEventListener('mouseup', () => {
if (intervalId) {
clearInterval(intervalId);
intervalId = null;
}
});
btn.addEventListener('mouseleave', () => {
if (intervalId) {
clearInterval(intervalId);
intervalId = null;
}
});
</script>
注意：必须监听 mouseleave，否则鼠标移出再松手，定时器仍运行。
立即学习“前端免费学习笔记（深入）”；
需要初始延迟？用 setTimeout 套一层
真实场景中，短按（setInterval 开始会误伤点击操作。
- 先用
setTimeout等 300ms，判断是否仍在按下状态 - 超时后才启动
setInterval，频率可设为 100–150ms 提升响应感 - 松手时既要清
setInterval，也要清掉还没执行的setTimeout
关键点：所有异步句柄（timeoutId 和 intervalId）都要各自独立管理，不可混用。
移动端触摸场景要额外处理 touchstart/touchend
只监听 mousedown 在手机上无效。必须同时支持两套事件，并避免 click 冲突（比如 touchstart 后默认会触发 click，造成重复）。
- 给按钮加
touchstart和touchend，逻辑和 mouse 类似 - 在
touchstart里调用event.preventDefault()，防止滚动或缩放干扰 - 不要依赖
click事件做长按逻辑，它延迟高且不可控
更稳妥的做法是统一用 PointerEvent（支持 mouse/touch/pen），但要注意 IE 不支持，需降级 fallback。
