如何实现鼠标按住按钮时快速递增数值？附初始点击递增代码

当然可以仅用原生JavaScript实现这个需求，完全不需要依赖jQuery——原生方案轻量且足够高效，jQuery只是提供了更简洁的语法糖而已，如果你项目里没用到jQuery，没必要为了这个功能额外引入它。

原生JavaScript实现方案 #

核心思路是利用mousedown事件启动定时器，持续执行递增逻辑；同时通过mouseup和mouseleave事件清除定时器，停止递增（后者是为了处理按住鼠标移出按钮的场景）。

完整代码示例：

<script>
// 用于保存定时器ID，方便后续清除
let incrementTimer;
// 缓存目标元素，避免重复DOM查询
const skillElement = document.getElementById('skill_1');

// 数值递增函数
function incrementValue() {
  let currentValue = parseInt(skillElement.innerHTML);
  skillElement.innerHTML = currentValue + 1;
}

// 获取按钮元素
const addButton = document.querySelector('button');

// 鼠标按下时启动持续递增
addButton.addEventListener('mousedown', function() {
  // 立即执行一次，避免定时器的初始延迟，提升交互体验
  incrementValue();
  // 每隔100ms执行一次递增，可根据需求调整间隔时间
  incrementTimer = setInterval(incrementValue, 100);
});

// 停止递增的通用函数
function stopIncrementing() {
  clearInterval(incrementTimer);
}

// 鼠标松开或移出按钮时停止递增
addButton.addEventListener('mouseup', stopIncrementing);
addButton.addEventListener('mouseleave', stopIncrementing);
</script>

<button>按住增加数值</button><br>
<span id="skill_1">0</span>

关键细节说明 #

• 缓存skillElement：避免每次递增都去DOM树中查找元素，提升性能；
• 立即执行递增：解决setInterval默认有初始延迟的问题，让用户按下按钮的瞬间就看到数值变化；
• 绑定mouseleave：防止用户按住鼠标后移出按钮，此时mouseup不会触发，导致数值一直递增的问题。

jQuery实现方案（如果项目已引入jQuery） #

原理和原生完全一致，只是事件绑定的语法更简洁：

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
let incrementTimer;

function incrementValue() {
  const $skill = $('#skill_1');
  $skill.text(parseInt($skill.text()) + 1);
}

$('button')
  .on('mousedown', function() {
    incrementValue();
    incrementTimer = setInterval(incrementValue, 100);
  })
  // 链式绑定多个停止事件
  .on('mouseup mouseleave', function() {
    clearInterval(incrementTimer);
  });
</script>

<button>按住增加数值</button><br>
<span id="skill_1">0</span>

总结 #

两种方案都能完美实现需求：

• 如果项目没有引入jQuery，优先选择原生JavaScript方案，更轻量且无额外依赖；
• 如果项目已经在使用jQuery，用jQuery实现会更简洁，但本质和原生逻辑没有区别。

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