Как вызвать событие нажатия / повторно вызвать функцию при нажатии и удерживании кнопки

Question

Итак, я новичок в JS и пытаюсь разобраться с этой проблемой.У меня есть этот HTML и JS

function incrementValue()
{
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
}

<form>
   <input type="text" id="number" value="0"/>
   <input type="button" onclick="incrementValue()" value="Increment Value" />
</form>

Если вы щелкнете по ней, просто.Теперь я хочу, чтобы кнопка была такой, чтобы, если я нажму на кнопку и удержу ее, число автоматически увеличивалось до тех пор, пока я не отпущу кнопку.Как мне это сделать?

Answer 1

У меня есть решение для покупки с помощью события mousedown, я буду использовать Jquery: HTMl

<button>My Button</button>
<div> </div>

JavaScript:

var number = 0;
var isMouseDown = false;
$('button').mousedown(function(){
  isMouseDown = true;
  if(isMouseDown){
    var addNumber = setInterval(function(){
    number++;
    $('div').html(number) ;
  }, 100)
  }
  $('html').mouseup(function(){
    isMouseDown = false;
    clearInterval(addNumber)
  })
})

Answer 2

Шаг 1:

Вы связываете событие onmousedown с кнопкой и заставляете его выполнить setInterval () для увеличения вашего значения вжелаемая скорость.

Шаг 2:

Вы связываете событие onmouseup с кнопкой, которая, когда пользователь снимает удержание, будет выполняться clearInterval () для остановки интервала.

Answer 3

Вам следует обработать событие mousedown и mouseup кнопки.

on mousedown, запустить таймер (setInterval) для периодического вызова incrementValue.на mouseup, остановите таймер.

function incrementValue()
{
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
}

var timer;
function start() {
    timer = setInterval(incrementValue, 100);
}
function stop() {
    clearInterval(timer);
}

<form>
   <input type="text" id="number" value="0"/>
   <input type="button" onmousedown="start()" onmouseup="stop()" onmouseleave="stop()" value="Increment Value" />
</form>

Answer 4

Используйте mousedown и mouseup события вместо click событий.

Начните интервал с mousedown и очистите его на mouseup.

Возможно, вы захотитедобавить несколько проверок для mouseout в случае, если мышь перемещается, пока кнопка удерживается нажатой.