html5原生input range拖动实时触发事件

善用搜索引擎啊兄弟http://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging
■网友
\u0026lt;input id="range" type="range" min="0" max="50000" value="https://www.zhihu.com/api/v4/questions/39049947/5"step="10" oninput="change()" onchange="change()"\u0026gt;\u0026lt;span id="value"\u0026gt;0\u0026lt;/span\u0026gt;\u0026lt;script type=\u0026#39;text/javascript\u0026#39;\u0026gt;function change() { var value = https://www.zhihu.com/api/v4/questions/39049947/document.getElementById(/u0026#39;range/u0026#39;).value ; document.getElementById(/u0026#39;value/u0026#39;).innerHTML = value;}/u0026lt;/script/u0026gt;在input中添加oninput事件
■网友
前人的方法我尝试了一遍。都不行。看了文档,input没有oninput、onchange属性,只有以下方法可行。
\u0026lt;input type="range" class="slider-range"\u0026gt;\u0026lt;script\u0026gt; const sliderRange = document.querySelector("#slider-range"); sliderRange.onchange = e =\u0026gt; { console.log("当前滑块值: ", e.target.value); };\u0026lt;/script\u0026gt;参考链接: HTML DOM Input Range 对象
■网友
\u0026lt;body\u0026gt; \u0026lt;input id="size" type="range" max="1000" min="100" value="https://www.zhihu.com/api/v4/questions/39049947/100" step="50" /\u0026gt; \u0026lt;script type="text/javascript"\u0026gt;$(\u0026#39;#size\u0026#39;).on(\u0026#39;input propertychange\u0026#39;,function(){//触发效果 })\u0026lt;/script\u0026gt;\u0026lt;/body\u0026gt; 【html5原生input range拖动实时触发事件】

■网友
如果说你要拖动结束后在触发,可以在\u0026lt;input id="range" type="range" min="0" max="50000" value="https://www.zhihu.com/api/v4/questions/39049947/5"step="10" onchange="change()" onchange="change()"\u0026gt;\u0026lt;span id="value"\u0026gt;0\u0026lt;/span\u0026gt;\u0026lt;script type=\u0026#39;text/javascript\u0026#39;\u0026gt;function change() { var value = https://www.zhihu.com/api/v4/questions/39049947/document.getElementById(/u0026#39;range/u0026#39;).value ;console.log(value)} /u0026lt;/script/u0026gt;用onchange。
■网友
用mousemove就可以啦


    推荐阅读