需求：实现按钮按住触发的Event listener及松开停止监听逻辑

核心思路 #

你需要的是按住按钮时持续触发增减逻辑，并实现加速效果，对应的关键事件监听器是：

• mousedown：用户按住按钮时启动自动增减的定时器
• mouseup：用户松开鼠标时停止定时器（不管鼠标是否在按钮上）
• 可选补充mouseout：防止按住鼠标移出按钮后仍持续触发（按需取舍）

完整实现代码 #

HTML 结构

<div class="time-picker">
  <button id="decreaseBtn">-</button>
  <span id="minuteDisplay">0</span>
  <button id="increaseBtn">+</button>
</div>

JavaScript 逻辑

// 全局变量控制定时器和加速参数
let timerId = null;
let currentMinute = 0;
let interval = 300; // 初始触发间隔（毫秒）
const minInterval = 50; // 最小间隔（最快速度）
const intervalStep = 20; // 每次加速缩短的间隔值

// 更新分钟显示
function updateDisplay() {
  document.getElementById('minuteDisplay').textContent = currentMinute;
}

// 增减分钟的核心逻辑
function adjustMinute(direction) {
  if (direction === 'increase') {
    currentMinute = Math.min(currentMinute + 1, 59); // 上限59分钟
  } else {
    currentMinute = Math.max(currentMinute - 1, 0); // 下限0分钟
  }
  updateDisplay();
}

// 启动自动增减的定时器（带加速逻辑）
function startAutoAdjust(direction) {
  // 先立即执行一次，避免按住后有延迟
  adjustMinute(direction);
  
  // 设置定时器，每次触发后缩短间隔（直到达到最小间隔）
  timerId = setInterval(() => {
    adjustMinute(direction);
    if (interval > minInterval) {
      interval -= intervalStep;
      // 清除旧定时器，用新间隔重新设置
      clearInterval(timerId);
      startAutoAdjust(direction);
    }
  }, interval);
}

// 停止自动增减并重置间隔
function stopAutoAdjust() {
  clearInterval(timerId);
  interval = 300; // 重置为初始间隔
}

// 绑定事件监听器
const increaseBtn = document.getElementById('increaseBtn');
const decreaseBtn = document.getElementById('decreaseBtn');

increaseBtn.addEventListener('mousedown', () => startAutoAdjust('increase'));
decreaseBtn.addEventListener('mousedown', () => startAutoAdjust('decrease'));

// 松开鼠标或移出按钮时停止
document.addEventListener('mouseup', stopAutoAdjust);
increaseBtn.addEventListener('mouseout', stopAutoAdjust);
decreaseBtn.addEventListener('mouseout', stopAutoAdjust);

关键细节说明 #

1. 加速逻辑：初始间隔300ms（每秒约3次），每次触发后间隔缩短20ms，直到达到50ms（每秒20次），实现按住越久速度越快的效果，参数可根据需求调整。
2. 事件绑定：将mouseup绑定到document上，确保用户松开鼠标时无论鼠标位置在哪都能停止定时器，解决你之前mouseleave操作不便的问题。
3. 边界控制：限制分钟在0-59之间，符合时间选择器的逻辑。
4. 定时器清理：每次调整间隔时都会清除旧定时器，避免多个定时器同时运行，防止内存泄漏。

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