Vue长按释放时意外重置：如何修改为点击才重置？

核心思路是：将长按状态的重置逻辑从释放事件（touchend/mouseup）中移除，仅绑定到click事件，同时保留长按触发的检测逻辑，确保释放时不改变已触发的长按状态。

示例代码实现 #

const targetDiv = document.querySelector('#your-target-div');
let longPressTimeoutId = null;
let isLongPressTriggered = false;

// 启动长按检测
function startLongPress() {
  // 300ms为长按阈值，可根据需求调整
  longPressTimeoutId = setTimeout(() => {
    isLongPressTriggered = true;
    console.log('长按已触发');
    // 这里添加长按触发后的业务逻辑，比如修改元素样式
    targetDiv.classList.add('long-pressed');
  }, 300);
}

// 取消未完成的长按检测，但不重置已触发的状态
function cancelPendingLongPress() {
  if (longPressTimeoutId) {
    clearTimeout(longPressTimeoutId);
    longPressTimeoutId = null;
  }
  // 注意：此处不修改isLongPressTriggered的值
}

// 仅在点击时重置长按状态
function resetLongPressState() {
  if (isLongPressTriggered) {
    isLongPressTriggered = false;
    console.log('长按状态已重置');
    // 恢复元素样式或其他业务逻辑
    targetDiv.classList.remove('long-pressed');
  }
}

// 绑定事件
targetDiv.addEventListener('mousedown', startLongPress);
targetDiv.addEventListener('touchstart', startLongPress);

targetDiv.addEventListener('mouseup', cancelPendingLongPress);
targetDiv.addEventListener('touchend', cancelPendingLongPress);
targetDiv.addEventListener('mouseleave', cancelPendingLongPress); // 防止鼠标移出元素后误触发长按

targetDiv.addEventListener('click', resetLongPressState);

关键修改点说明 #

• 拆分释放事件逻辑：cancelPendingLongPress仅负责清除未完成的长按定时器，不改动已触发的长按状态
• 单独提取resetLongPressState函数，仅在click事件中调用，专门处理状态重置
• 保留mouseleave事件处理，避免鼠标移出元素后仍触发长按

这样调整后，长按触发后即使释放鼠标/手指，状态也不会重置；只有点击该div时，才会恢复长按状态。

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