如何实现同一按钮click与mousedown事件不同行为且避免触发冲突

核心通过定时器阈值判定区分短按/长按，用状态标记阻断两类事件的互相干扰：设定一个长按判定时间（示例为200ms，可自行调整），按下时长超过阈值判定为长按，执行持续累加逻辑；不足阈值判定为短按，执行单次加15逻辑，完全避免事件冲突。

修正后可运行代码 #

var value = 0;
const LONG_PRESS_THRESHOLD = 200; // 长按判定阈值，单位ms，数值越小越容易触发长按
const ADD_INTERVAL = 100; // 长按后数值累加间隔，单位ms，数值越小累加越快
let pressTimer = null;
let addTimer = null;
let isLongPress = false;

const addBtn = document.getElementById("Addbtn");
const demoEl = document.getElementById("demo");

// 初始化数值显示
demoEl.innerHTML = value.toString();

addBtn.addEventListener("mousedown", mouseDown);
addBtn.addEventListener("mouseup", clearPress);
addBtn.addEventListener("mouseleave", clearPress);

function mouseDown(e) {
  // 只响应鼠标左键操作，排除中键、右键干扰
  if (e.button !== 0) return;
  isLongPress = false;
  // 启动长按判定定时器
  pressTimer = setTimeout(() => {
    isLongPress = true;
    // 触发长按后启动持续累加逻辑
    addTimer = setInterval(() => {
      value++;
      demoEl.innerHTML = value.toString();
    }, ADD_INTERVAL);
  }, LONG_PRESS_THRESHOLD);
}

function clearPress() {
  // 清空所有定时器，避免内存泄漏和逻辑异常
  clearTimeout(pressTimer);
  clearInterval(addTimer);
  // 未触发长按的场景判定为短按，执行加15逻辑
  if (!isLongPress) {
    value += 15;
    demoEl.innerHTML = value.toString();
  }
  // 重置长按标记，等待下一次操作
  isLongPress = false;
}

关键优化点 #

• 无需绑定click事件，短按逻辑统一在mouseup阶段判断长按状态后执行，从根源上避免了mousedown和click的事件冲突
• 绑定mouseleave事件兜底，防止用户按下鼠标后移出按钮再松开，导致累加逻辑一直运行的异常
• 修复原代码中tosSring的拼写错误，数值统一用全局变量管理，避免挂载到DOM元素上带来的不可预期问题
• 所有阈值均为可配置常量，可根据自己的交互需求灵活调整长按触发灵敏度、累加速度

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