1

Не получается нормально сделать событие mousePressed (при зажатой кнопки мыши происходит увеличение величины с шагом одна единица), получается только единоразовое увеличение, как сделать чтобы она бесконечно увеличивалась, пока кнопка мыши нажата?

var i = 5;
$(".inc").mousedown(function() {
  $(".count").val(i++);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="inc">Увеличить<button>
<input type="text" class="count">

3 ответа 3

2

Используем setInterval при нажитие мышки, и clearInterval когда отпустили мышку.

Вот рабочий пример

var i = 5;
var timeout = 0;
$(".inc").mousedown(function() {
 timeout = setInterval(function(){
  $(".count").val(i++);
 },500)
  
});
  
$(".inc").mouseup(function() {
clearInterval(timeout);  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="inc">Увеличить<button>
<input type="text" class="count">

0

mouseup работает когда отпускаешь клавишу мыши на этом элементе, и если мышь нажать и спустить вниз элемента, то mouseup не отработает.

var i = 5;
intervalId = null;
timeoutId = null;
 $(".count").val(i);
 
function add() {
  $(".count").val(i++);
}

$(".inc").mousedown(function() {
  timeoutId = setTimeout( function () {
     intervalId = setInterval(add,200);
  }, 500)
  
});

$(".inc").hover(
function(){},
function(){
   clearInterval(intervalId); 
   clearTimeout(timeoutId); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="inc">Увеличить<button>
<input type="text" class="count">

0

// Флаг начала отсчета
var counterInc = false;
var counterDec = false;
// Счетчик
var counter = 0;
var idproc

// Зажата клавиша мыши
$(".inc").mousedown(function() {
  counterInc = true;
  idproc = setInterval(calculation, 50)
});
$(".dec").mousedown(function() {
  counterDec = true;
  idproc = setInterval(calculation, 50)
});

// Отпущена клавиша мыши
$(".inc").mouseup(function() {
  counterInc = false;
}).mouseleave(function() {
  counterInc = false;
});
$(".dec").mouseup(function() {
  counterDec = false;
}).mouseleave(function() {
  counterDec = false;
});
// Подсчет секунд
function calculation() {
  if (counterInc)
    $(".count").val(++counter);
  else if (counterDec && counter != 0)
    $(".count").val(--counter);
  else {
    clearInterval(idproc);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="inc">Увеличить</button>
<input type="text" class="count"/>
<button class="dec">Уменьшить</button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.