标签 javascript jquery
<分区>
我有这个脚本，每次我点击一个按钮时都会将值加 1:
<script>
function incrementValue(id) {
var value = parseInt(document.getElementById(id).innerHTML);
value = value + 1;
document.getElementById(id).innerHTML = value;
}
</script>
<button onclick="incrementValue('skill_1')"> add </button><br>
<span id=skill_1>0</span>
但是我想调整它，如果我按住鼠标按钮，它会重复，这样我就不必一遍又一遍地按下它。
有什么方法可以使用 javascript 来做到这一点？或者 jquery 会适合吗？
最佳答案
要实现这一点，您需要使用 mousedown 事件来启动超时(这是增量计数开始之前的延迟)和间隔(重复计数)。您还需要一个 mouseup 和 mouseleave 处理程序来删除这两个计时器。试试这个:
var timeout, interval;
[].forEach.call(document.querySelectorAll('.add'), function(button) {
button.addEventListener('mousedown', function() {
var id = button.dataset.target;
incrementValue(id);
timeout = setTimeout(function() {
interval = setInterval(function() {
incrementValue(id);
}, 50);
}, 300);
});
button.addEventListener('mouseup', clearTimers);
button.addEventListener('mouseleave', clearTimers);
function clearTimers() {
clearTimeout(timeout);
clearInterval(interval);
}
});
function incrementValue(id) {
var el = document.getElementById(id);
var value = parseInt(el.textContent, 10);
document.getElementById(id).textContent = ++value;
}<button class="add" data-target="skill_1">add</button><br />
<span id="skill_1">0</span>关于使用鼠标按住 Javascript 可以更快地增加值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48442194/