onChange事件的HTML5范围
目前，我的范围input上的onChange事件在每一步触发。
有没有办法阻止这个事件发生，直到用户放开滑块？
我正在使用范围来创build一个search查询。 我希望能够在每次更改表单时运行search，但是在滑块移动的每一步发出search请求太多。
代码如下：
HTML：
<div id="page"> <p>Currently viewing page <span>1</span>.</p> <input class="slider" type="range" min="1" max="100" step="1" value="1" name="page" /> </div> JavaScript的：
$(".slider").change(function() { $("#query").text($("form").serialize()); });
这有帮助吗？
用于最终选定的值：
$(".slider").on("change", function(){console.log(this.value)});
使用滑动获得增量值：
$(".slider").on("input", function(){console.log(this.value)});
有点晚了，但是前几天我也遇到了同样的问题。 这里是我使用jQuery绑定/触发器的解决scheme：
(function(el, timeout) { var timer, trig=function() { el.trigger("changed"); }; el.bind("change", function() { if(timer) { clearTimeout(timer); } timer = setTimeout(trig, timeout); }); })($(".slider"), 500);
现在只需将您的函数绑定到“已更改”事件。
呸!
使用onmouseup事件而不是onChange
一个问题是，AFAIK HTML5没有定义什么时候onchange事件应该触发，所以它很可能不同于浏览器到浏览器。 而且你还必须考虑到，浏览器实际上并不需要将input type=range渲染为滑块。
你唯一的select是你必须build立一个机制来确保你的search不会被频繁触发，例如，检查一个search当前是否正在运行，如果是，就要中止，或者确保search是在最多每x秒。
后者的简单例子（只是一个简单的黑客，未经testing）。
var doSearch = false; function runSearch() { // execute your search here } setInterval(function() { if (doSearch) { doSearch = false; runSearch(); } }, 2000); // 2000ms between each search. yourRangeInputElement.onchange = function() { doSearch = true; }
纯JS在这里：
myInput.oninput = function(){ console.log(this.value); }
要么
myInput.onchange = function(){ console.log(this.value); }
以下是我用于捕获html5范围滑块的“更改事件”：
HTML：
<form oninput="output1.value=slider1.value"> <input type="range" name="slider1" value="50"/> <output name="output1" for="slider1">50</output> </form>
JavaScript的：
var $slider = $('input[name="slider1"]'); $slider.bind('change', function(e) { e.preventDefault(); console.log($(this).val()); });
如果您想在单击（甚至拖动）时返回其值，您还可以将“click”事件绑定到范围滑块。 把它想象成一个“鼠标”事件。 （我曾尝试过，但点击滑块后滑块没有停止。）
JavaScript的：
$slider.bind('click', function(e) { e.preventDefault(); console.log($this).val()); }
在附注中，这会返回一个string，因此请确保在适当时使用“parseInt（$（this）.value（））”。
希望这可以帮助。
在同一页面中使用多个HTML5默认滑块，并使用以下设置：
- 使用
oninput事件移动滑块时，页面中的输出标签更改值 - 释放时会触发一次
change事件
使用最新的Chrome进行testing，并使用Node和Socket.io在树莓上进行编译。
<output id="APIDConKpVal"></output> <input type="range" class="PIDControlSlider" min="0" max="1500" step="1" id="APIDConKp" oninput="APIDConKpVal.value=value"/> <output id="APIDConKiVal"></output> <input type="range" class="PIDControlSlider" min="0" max="2000" step="1" id="APIDConKi" oninput="APIDConKiVal.value=value"/>
一个简单的Javascript代码创build监听器。 您可能需要尝试不同的事件，而不是在最后一行中的“更改”，以查看是否适合您。
window.onload=function() { var classname = document.getElementsByClassName("PIDControlSlider"); var myFunction = function() { var attribute = this.getAttribute("id"); //Your code goes here socket.emit('SCMD', this.getAttribute("id")+' '+ this.value); }; for(var i=0;i<classname.length;i++){ classname[i].addEventListener('change', myFunction, false); } }
gravediggin但如果你需要它检查JS 节stream或反弹function
用法：
//resize events gets processed 500ms after the last Event addEventListener("resize", _debounce(function(){ foo;}, 500)); //resize events get processed every 500ms addEventListener("resize", _throttle(function(){ foo;}, 500));
码：
/*waits 'delay' time after the last event to fire */ _debounce = function(fn, delay) { var timer = null; return function() { var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); }; }; /* triggers every 'treshhold' ms, */ _throttle = function(fn, threshhold, scope) { threshhold = threshhold || 250; var last, deferTimer; return function() { var context = scope || this; var now = +new Date(), args = arguments; if (last && now < last + threshhold) { // hold on to it clearTimeout(deferTimer); deferTimer = setTimeout(function() { last = now; fn.apply(context, args); }, threshhold); } else { last = now; fn.apply(context, args); } }; };
另一个build议：
$(".slider").change(function(){ if (this.sliderTimeour) clearTimeout(this.sliderTimeour); this.sliderTimeour = setTimeout(function(){ //your code here },delayTimeHere); });
您可以尝试使用blur事件。 当然这也有它的局限性，但这只是另一个build议:)
您也可以尝试将blur ， onkeyup和onmouseup事件组合起来，以尝试捕捉不同的情况：当用户使用键盘箭头进行select并点击<Tab>时blur当用户使用键盘进行select时保持onKey滑块和onmouseup当他使用鼠标。 甚至可能只将onkeyup和onmouseup结合起来。
如果值已经改变，你还是要做一个简单的检查，只有在发生改变后才运行必要的代码。
onchange工作得很好，但我需要更新值，而滑动它。
var interval; $("#rangeinput").mousedown(function(event){ interval = setInterval(function(){ $("#output").html($("#rangeinput").val()); console.log("running"); },150); }); $("#rangeinput").mouseup(function(event){ clearInterval(interval); });
