Как сделать зажатие кнопки на HTML5 и JavaScript

Как сделать зажатие кнопки на HTML5 и JavaScript (когда долго держишь кнопку и например постоянно изменяет положение блока)


Ответы (1 шт):

Автор решения: De.Minov

Вариант на JS, подробное описание в комментариях к коду.

let clamped = document.querySelector('#clamped'),
    elPress = false, // "флаг" в котором будем хранить какая кнопка зажата
    pressTimer; // Тут будет храниться таймер "зажатого" действия

clamped.addEventListener('mousedown', function(e) { // Вешаем обработчик когда НАЖИМАЕМ кнопку мыши, на нужный элемент
  if(e.button === 0) { // Запускаем если это кнопка ЛКМ
    elPress = e.target; // Запишем текущю кнопку в переменную
    pressTimer = setInterval(function() { // Запускаем таймер
      document.querySelector('.random-color').style.background = '#'+RandomHEX(); // Я для примера буду меня фон блока на рандомный
    }, 100); // Скорость определите сами
  }
});

document.addEventListener('mouseup', function(e) { // Вешаем обработчик на документ, по отжатию ЛКМ
  if(e.target === elPress || // Если нажатый элемент === нашему зажатому
  elPress !== false // ИЛИ зажатый элемент НЕ false
  && e.button === 0) { // И нажатая кнопка === ЛКМ
    clearInterval(pressTimer); // То остановим таймер
    elPress = false; // И поменяем флаг на false
  }
}, true);


function RandomHEX() {
    return (Math.random() * 0x1000000 | 0x1000000).toString(16).slice(1);
}
#clamped:active {
  border-color: blue;
}

.random-color {
  display: block;
  width: 100px;
  height: 100px;
  margin-top: 10px;
  box-shadow: 0 0 1px 0 #666;
}
<button id="clamped">Зажми меня</button>

<div class="random-color"></div>

→ Ссылка