vanilla JS实现多按钮按压判定 获取ID时遇clicked_id未定义报错

• 控制台Uncaught ReferenceError: clicked_id is not defined 报错源于代码中直接引用了未声明的clicked_id变量：var button = document.getElementById(clicked_id); 由于变量不存在，整个IIFE逻辑在执行到这一行时直接中断，后续的事件绑定完全没有生效，长按逻辑自然无法触发
• mouseup回调里引用的this_id同样是未声明变量，即使事件绑定成功，长按分支的alert也会因变量缺失报错
• 预先写死单个元素绑定的实现方式，无法适配多按钮场景，和你参考的StackOverflow「通过事件对象获取点击按钮ID」的思路没有结合点

实现思路 #

改用事件委托模式，不需要提前遍历页面按钮单独绑定事件，通过事件回调的参数动态获取当前交互的按钮ID，和你参考的取按钮ID的方案逻辑完全对齐，同时天然支持多按钮扩展。

完整可运行代码 #

<!-- 任意新增按钮无需修改JS代码 -->
<button id="button">默认按钮</button>
<button id="button-2">扩展按钮</button>
<script>
(function(window, document, undefined){
 'use strict';
 let pressState;
 // 全局监听按钮按下动作
 document.addEventListener("mousedown", function(e){
   // 仅处理按钮元素的按下事件
   if(e.target.tagName.toLowerCase() === 'button') {
     pressState = {
       startTime: new Date(),
       buttonId: e.target.id
     };
   }
 });
 // 全局监听按钮抬起动作
 document.addEventListener("mouseup", function(e) {
   // 无有效按下状态时直接跳过，避免异常触发
   if(!pressState || e.target.tagName.toLowerCase() !== 'button') return;
   const duration = new Date() - pressState.startTime;
   // 按键时长分支判断
   if (duration > 0 && duration < 500) {
       alert(`短按：按钮ID为${pressState.buttonId}`);
   }
   if (duration > 500 && duration < 1000) {
       alert(`中按：按钮ID为${pressState.buttonId}`);
   }
   if (duration > 1000) {
       alert(`长按：按钮ID为${pressState.buttonId}`);
   }
   // 清空状态避免异常残留
   pressState = null;
 });
})(window, document);
</script>

方案适配说明 #

• 按钮ID全程通过事件对象的e.target.id动态获取，从根源消除clicked_id/this_id这类未声明变量的报错
• 新增多按钮场景只需要添加对应的HTML标签，不需要改动JS绑定逻辑
• 长按逻辑的触发状态和对应按钮ID做关联存储，不会出现多按钮交互时的状态混淆

内容的提问来源于stack exchange，提问作者DallasOiro