在鼠标保持时连续递增值

问题描述

我有一个HTML5'范围'控件，我想在其中任何一边添加加号（+）和减号（ - ）按钮。

小提琴的作品很好，除了在'点击并按住'时仅增加（或减少）一次。 虽然我想要的是它应该持续增加（或减少）。

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'数字'控件本身具有此体验。

通过SO查看，无法在任何地方找到这个问题。我得到的最近的是，只需点击一下。

解决方案

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

• 创建一个从零开始的数字变量。 b $ b
• 如果按下Add按钮，则将'isDown'变量设置为1.


• 如果按下Subtract按钮，则将'isDown'变量设置为-1。


• 如果释放任何按钮，请将'isDown'变量设置为0;


• 启动 requestAnimationFrame 循环，不断检查'isDown'是否不为零。如果不为零，requestAnimationFrame会将'number'变量更改为isDown值。

以下是示例代码和演示：

  var $ result = $（'＃result'）; var number = 0; var isDown = 0; var delay = 250; var nextTime = 0; requestAnimationFrame （观察者）; $（ 链接）的mousedown（函数（E）{handleMouseDown（e）中;}）; $（ 链接）的mouseup（函数（E）{handleMouseUp（e）中;}）; $（ button）。mouseout（function（e）{handleMouseUp（e）;}）; function handleMouseDown（e）{//告诉浏览器我们正在处理这个事件e.preventDefault（）; e.stopPropagation（）; //将你的mousedown东西放在这里isDown =（e.target.id =='Add'）？1：-1;} function handleMouseUp（e）{//告诉浏览器我们正在处理这个事件e.preventDefault（） ; e.stopPropagation（）; //把你的mouseup东西放在这里isDown = 0;}函数监视器（时间）{requestAnimationFrame（watcher）; if（time  

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

I have an HTML5 'range' control to which I want to add a plus (+) and minus (-) buttons on either sides.

The fiddle works fine, except that the value increase (or decrease) only once on 'click and hold'. While I want is it should increase (or decrease) continuously.

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 'number' control have this experience natively.

Looked through SO, couldn't find this question anywhere. Closest I got is, this, which again does only one click.

解决方案

You can use requestAnimationFrame to constantly check if any button is still pressed. If still pressed, you can increment or decrement your value.

• Create a 'number' variable that starts at zero.
• If the Add button is pressed, set an 'isDown' variable to 1.
• If the Subtract button is pressed, set the 'isDown' variable to -1.
• If any button is released, set the 'isDown' variable to 0;
• Start a requestAnimationFrame loop that constantly checks if 'isDown' is not zero. If not zero, requestAnimationFrame changes the 'number' variable by the isDown value.

Here's example code and a Demo:

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>

这篇关于在鼠标保持时连续递增值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！