当按下按钮（长按点击）时执行jQuery事件

Question

我有以下的增加/减少按钮。我希望在按下按钮时触发事件，而不仅仅是在单击时触发。

请注意，当您单击按钮一次并按住回车键时，它会完成我想要实现的功能，但应该使用单击完成。

  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>

- user9402741

---

那么你肯定应该研究一下mousedown和mouseup事件？ - dbf

可能是需要JavaScript代码来实现按钮按住的重复问题。 - MauriceNino

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>

- Josh Adrian

---

请注意，在平板电脑/移动设备上，不会触发mousedown事件。 - user9402741