It is impossible to make the mousePressed event normally (when the mouse button is held down, the value increases in increments of one unit), it turns out only a one-time increase, how to make it increase infinitely while the mouse button is pressed?

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 answers 3

    Use setInterval on mouse, and clearInterval when the mouse is released.

    Here is a working example.

     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">

      mouseup works when you release the mouse button on this element, and if you click and drag the element down, the mouseup will not work.

       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"> 

         // Флаг начала отсчета 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>