Question

此处我有plus和minus图像，用于成功增加或减少输入值。这是 Working JSFiddel

我想如果用户继续按键增加/减少它应该相应地执行而不是一次又一次地点击。那可能吗？如果是，那么我必须改变什么？

注意： HTML5 <input type="number">效果很好，但由于兼容性问题，我不想使用它。

Answer 1

从概念上讲，您可以触发mousedown事件，然后每隔n毫秒重复一次，直到收到mouseup事件。

这是在mousedown上执行增量或减量操作，然后安装一个计时器，而不是使用setInterval（）每n毫秒运行一次。当您收到mouseup事件时，您将终止计时器。

Answer 2

试试这个：

Working demo

$(function () {
    var interval;
    $('.add').on('mousedown',function(e) {
        var $this = $(this);
    interval = setInterval(function() {
        debugger
      var $qty=$this.parent().parent().find('.qty');
        var currentVal = parseInt($qty.val());
        if (!isNaN(currentVal)) {
            $qty.val(currentVal + 1);
        }
    },500); 
}).on('mouseup',function(e) {
    clearInterval(interval);
}).on('mouseout',function(e) {
    clearInterval(interval);
});
    $('.minus').on('click',function(){

    }).on('mousedown',function(e) {
         var $this = $(this);
    interval = setInterval(function() {
      var $qty= $this.parent().parent().find('.qty');
        var currentVal = parseInt($qty.val());
        if (!isNaN(currentVal) && currentVal > 0) {
            $qty.val(currentVal - 1);
        }
    },500); 
}).on('mouseup',function(e) {
    clearInterval(interval);
}).on('mouseout',function(e) {
    clearInterval(interval);
});

});

编辑：还添加了mouseout事件。谢谢你指出@Yorick

Answer 3

你应该创建一个标志变量，当鼠标悬停在按钮上并按下鼠标按钮时，该变量设置为true。然后通过创建函数并使用setTimeout函数定期检查该变量。在函数中检查标志并相应地增加/减少正确的值。

如何重复点击事件继续按下Jquery

3 个答案: