我有一个HTML5“范围”控件,要在其两侧添加加号(+)和减号(-)按钮。

fiddle 工作正常,除了'click and hold'上的值仅增加(或减少)一次。 虽然我需要,但它应该连续增加(或减少)。

Fiddle

HTML,

<input type='button' id='minus'/>
<div class='range-container'>
    <input id='range' type='range' min='0' max='100' step='1'/>
</div>
<input type='button' id='plus'/>

JavaScript,
$('#plus').click(function() {
    $('#range').val(parseInt($('#range').val()) + 1);
});

$('#minus').click(function() {
    $('#range').val(parseInt($('#range').val()) - 1);
});

HTML5“数字”控件本身具有这种体验。

仔细观察,在任何地方都找不到这个问题。我最近得到的是this,它再次只单击一次。

最佳答案

您可以使用requestAnimationFrame不断检查是否仍然按下任何按钮。如果仍然按下,则可以增加或减少值。

  • 创建一个从零开始的'number'变量。
  • 如果按下添加按钮,请将'isDown'变量设置为1。
  • 如果按下“减”按钮,请将“isDown”变量设置为-1。
  • 如果释放了任何按钮,请将'isDown'变量设置为0;否则,将其设置为0。
  • 启动requestAnimationFrame循环,该循环不断检查'isDown'是否不为零。如果不为零,则requestAnimationFrame通过isDown值更改'number'变量。

  • 这是示例代码和演示:

    var $result=$('#result');
    var number=0;
    var isDown=0;
    var delay=250;
    var nextTime=0;
    
    requestAnimationFrame(watcher);
    
    $("button").mousedown(function(e){handleMouseDown(e);});
    $("button").mouseup(function(e){handleMouseUp(e);});
    $("button").mouseout(function(e){handleMouseUp(e);});
    
    
    function handleMouseDown(e){
      // tell the browser we're handling this event
      e.preventDefault();
      e.stopPropagation();
    
      // Put your mousedown stuff here
      isDown=(e.target.id=='Add')?1:-1;
    }
    
    function handleMouseUp(e){
      // tell the browser we're handling this event
      e.preventDefault();
      e.stopPropagation();
    
      // Put your mouseup stuff here
      isDown=0;
    }
    
    function watcher(time){
      requestAnimationFrame(watcher);
      if(time<nextTime){return;}
      nextTime=time+delay;
      if(isDown!==0){
        number+=isDown;
        $result.text(number);
      }
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <button id=Add>Add</button>
    <button id=Subtract>Subtract</button>
    <span id='result'>0</span>

    关于javascript - 按住鼠标可连续增加值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28127507/

    10-13 01:03