在鼠标保持时连续递增值

我有一个HTML5’范围’控件，我想在其中添加一个加号（+）和减号（ – ）按钮。

小提琴工作得很好，除了“点击并保持”时值只增加（或减少）一次。 我想要的是它应该不断增加（或减少）。

小提琴

HTML，

JavaScript中，

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

HTML5’数字’控件本身就有这种体验。

通过SO看，在任何地方找不到这个问题。 我得到的最近的是， 这只是一次点击。

Answer 1

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

• 创建一个从零开始的’number’变量。
• 如果按下“添加”按钮，请将“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(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 

  Add Subtract 0 

Answer 2

编辑，更新

尝试

 var range = $("#range") , fx = function(elem, prop) { return elem .animate({ value: range.prop(prop) }, { duration: 3000, easing: "linear", step: function(now) { elem.val(now + prop === ("max","+"||"min","-") + elem.prop("step")) } }) }; $('#plus').mousedown(function(e) { fx(range, "max") }); $('#minus').mousedown(function minus(e) { fx(range, "min") }); $(document).mouseup(function(e) { range.stop(true, false) }); 

jsfiddle http://jsfiddle.net/bnesu3h9/3/

 var range = $("#range") , fx = function(elem, prop) { return elem .animate({ value: range.prop(prop) }, { duration: 3000, easing: "linear", step: function(now) { elem.val(now + prop === ("max","+"||"min","-") + elem.prop("step")) } }) }; $('#plus').mousedown(function(e) { fx(range, "max") }); $('#minus').mousedown(function minus(e) { fx(range, "min") }); $(document).mouseup(function(e) { range.stop(true, false) }); 

 #plus { width: 15px; height: 15px; background-color: red; float: left; } #minus { width: 15px; height: 15px; background-color: blue; float: left; } .range-container { float: left; overflow: auto; } 

Answer 3

这个答案应该有帮助。

click事件包括mouseup和mousedown 。 你最初需要单独处理mousedown ，并不断检查鼠标是否仍然处于关闭状态。 您可以停止检查文档mouseup 。

Answer 4

对此的基本方法是在按下其中一个按钮时以特定间隔开始循环，在每个刻度处进行值更改。 单击按钮时启动，释放按钮时停止。 这里是仅用于概念演示目的的简单代码：

 // Store the reference var range = $('#range'); // These functions will change the value function increment () { range.val(parseInt(range.val()) + 1) } function decrement () { range.val(parseInt(range.val()) - 1) } // Attaches polling function to element function poll (el, interval, fn) { var isHeldDown = false; return el .on("mousedown", function() { isHeldDown = true; (function loop (range) { if (!isHeldDown) return; // Stop if it was released fn(); setTimeout(loop, interval); // Run the function again })(); }) .on("mouseup mouseleave", function () { isHeldDown = false; // Stop polling on leave or key release }); } poll($("#plus"), 40, increment); poll($("#minus"), 40, decrement); 

JSFiddle 。

在生产等级版本中，您需要应用计时function而不是恒定间隔; 考虑应该开始和停止轮询的所有可能事件，以便当用户移动指针或其他东西时它不会永远停留; 使用requestAnimationFrame可以更精确地控制计时function。