Как сделать зажатие кнопки на 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>