javascript - 按下按钮时执行 jquery 事件(按住不放)

Question

我有以下递增/递减按钮。我想在按下按钮时触发事件，而不仅仅是在单击时触发。

请注意，当您单击按钮一次并按住 Enter 键时，它会执行我想要实现的操作，但应该通过单击来完成。

  var Basket = {
     plusIncrementButton : $("#plus-btn"),
     minusIncrementButton : $("#minus-btn"),
     quantityInput : $('#qty_input')
  };

  
  /* Increment button */
  Basket.plusIncrementButton.on('click',e=>{
    Basket.quantityInput.val(parseInt(Basket.quantityInput.val()) + 1 );
        });
    Basket.minusIncrementButton.on('click',e=>{
        Basket.quantityInput.val(parseInt(Basket.quantityInput.val()) - 1 );
    if (Basket.quantityInput.val() == 0) {
        Basket.quantityInput.val(1);
    }

        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group mb-3">
<div class="input-group-prepend">
 <button class="btn btn-danger btn-sm incbtn" id="minus-btn">decrement</button>
                             </div>
<input type="number" id="qty_input" class="form-control form-control-sm" value="1" min="1">
                             <div class="input-group-prepend">
<button class="btn btn-success btn-sm incbtn" id="plus-btn">Increment</button>
</div>
</div>

Answer 1

这可以通过使用递归来完成。我正在使用 speed 在递增时调整速度。我还添加了 mouseleave 以防止当光标离开按钮时该功能继续循环此功能。您可以执行相反的递减操作。

编辑:要让它在移动设备上运行，只需将 touchstart、touchend 和 touchmove 添加到代码中。

var timeout;
var speed = 500;

// Increment button
$('#plus-btn').on('mousedown mouseup mouseleave', e => {
  if (e.type == "mousedown") {
    increment(speed);
  } else {
    stop()
  }
});

// Increment function
function increment(speed) {
  $('#qty-input').val(parseInt($('#qty-input').val()) + 1);
  timeout = setTimeout(() => {
    increment(speed * 0.8);
  }, speed);
}

function stop() {
  clearTimeout(timeout);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group-prepend">
  <button class="btn btn-danger btn-sm incbtn" id="minus-btn">decrement</button>
</div>
<input type="number" id="qty-input" class="form-control form-control-sm" value="1" min="1">
<div class="input-group-prepend">
  <button class="btn btn-success btn-sm incbtn" id="plus-btn">Increment</button>
</div>