基于mouseDown与mouseUp实现长短按不同功能的问题排查

云原生阿岚

2026-10-1

问题修复方案

原有代码问题分析

计算时机错误：你将按下时长的计算逻辑放在了mousedown事件回调中，此时本次点击的mouseup事件还未触发，只能拿到上一次点击的松开时间，第一次点击没有历史松开时间变量值，因此第一次点击无法正常判断
逻辑不符合需求：长按触发条件是「按下状态持续超过x」，不需要等到松开就可以触发，原有逻辑只能在下次按下的时候才能判断上一次的按压时长，完全不符合交互逻辑
缺少状态标记：没有标记是否已经触发过长按逻辑，可能会出现长按松开后重复触发短按逻辑的问题

修复后实现代码

// 长按判定阈值，单位为毫秒，可根据需求调整
const PRESS_THRESHOLD = 500;
// 长按计时器ID，用于取消未触发的长按判定
let pressTimer = null;
// 长按触发标记，避免短按逻辑重复执行
let longPressFired = false;

function onMouseDown(event) {
  // 每次按下时重置状态
  longPressFired = false;
  // 启动长按倒计时，达到阈值后触发长按逻辑
  pressTimer = setTimeout(() => {
    longPressFired = true;
    functionality(1);
  }, PRESS_THRESHOLD);
}

function onMouseUp(event) {
  // 清除还未触发的长按定时器
  clearTimeout(pressTimer);
  // 未触发过长按的情况下，执行短按逻辑
  if (!longPressFired) {
    functionality(2);
  }
}

// 可选补充：如果鼠标在按下状态移出绑定元素，取消本次按压判定
function onMouseLeave(event) {
  clearTimeout(pressTimer);
  longPressFired = false;
}