触摸屏长按按钮定时变色触发功能实现及现有代码bug修复求助

原有代码存在的问题 #

• 元素选择器不匹配：HTML按钮id为btn，JS中获取元素时使用的id是pressBtn，无法正确获取按钮DOM
• 缺少触摸事件支持：仅监听了鼠标事件，未适配触摸屏的touchstart/touchend事件，移动端无法触发交互
• 按下逻辑完全错误：mousedown触发时的判断逻辑写反，且仅在按下瞬间执行一次判断，没有定时器实现时间到达后的自动样式变更和函数触发
• 阈值配置错误：需求中0.5s变绿色并触发函数，原有代码写的是1000ms才变绿色
• 没有提前终止逻辑：用户提前松开时没有清除待执行的定时器，会导致即便提前松开也可能触发后续逻辑

修复后完整代码 #

HTML代码 #

<button id="btn">Button Text</button>

JS代码 #

const btn = document.getElementById("btn");
// 存储定时器id
let timer200 = null;
let timer500 = null;
// 存储按下时间，用于后续额外校验
let pressStartTime = 0;

// 按下触发逻辑，兼容鼠标+触摸
const handlePressStart = (e) => {
  // 阻止触摸事件默认行为，避免和鼠标事件重复触发
  e.preventDefault();
  pressStartTime = performance.now();
  // 重置样式为初始黑色
  btn.style.color = "#000";
  // 200ms后变橙色
  timer200 = setTimeout(() => {
    btn.style.color = "orange";
  }, 200);
  // 500ms后变绿色，触发目标函数
  timer500 = setTimeout(() => {
    btn.style.color = "green";
    myFunction();
  }, 500);
}

// 松开触发逻辑，兼容鼠标+触摸
const handlePressEnd = () => {
  // 清除所有未执行的定时器，避免提前松开仍触发后续逻辑
  clearTimeout(timer200);
  clearTimeout(timer500);
  // 重置样式为黑色
  btn.style.color = "#000";
}

// 绑定事件，兼容全场景
btn.addEventListener('mousedown', handlePressStart);
btn.addEventListener('touchstart', handlePressStart);
btn.addEventListener('mouseup', handlePressEnd);
btn.addEventListener('touchend', handlePressEnd);
btn.addEventListener('mouseleave', handlePressEnd); // 鼠标移出按钮也视为松开终止逻辑

// 自定义业务函数
function myFunction() {
  console.log("触发自定义函数myFunction");
  // 此处填写你的业务逻辑
}

效果验证 #

• 按下不足0.2s松开：按钮全程保持黑色，不触发任何函数
• 按下超过0.2s不足0.5s松开：按钮会变为橙色，松开后恢复黑色，不触发函数
• 按下超过0.5s：按钮先在0.2s节点变为橙色，0.5s节点变为绿色同时触发myFunction，松开后恢复黑色

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