拖动范围滑块时，什么DOM事件允许持续触发？

debugcn 发表于 Dev

维沙尔·in那

我目前有一个滑块和一个旁边的框，我想在其中显示滑块的当前值。我希望当我将滑块从0拖动到100时，框中的值不断变化。哪个DOM事件最能描述此类事件？目前，我已单击它，因此在移动完滑块后它会更新框中的值。

let text1 = document.getElementById("sliderText1");
let slider1 = document.getElementById("slider1");
text1.textContent = slider1.value + "%";
slider1.addEventListener("mouseup",function(){
  text1.textContent = slider1.value + "%"
});

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
</head>
<body>
  <div style="float:left";>
    <input type="range" id="slider1" min="0"        max="100" value="50"> 
  </div>
  <div style = "float:left;">
    <p id = "sliderText1" style = "margin-top:      2px; margin-left: 2px; border-style:          solid"></p>
  </div> 
<script src="script.js"></script>
</body>
</html>

吉斯·范·奥弗肖特（Jis van Overschot）

您可以使用该mousemove事件，该事件应该起作用。

这是有关事件https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mousemove_event的MDN文档

let text1 = document.getElementById("sliderText1");
let slider1 = document.getElementById("slider1");
text1.textContent = slider1.value + "%";
slider1.addEventListener("mousemove",function(e){
  text1.textContent = slider1.value + "%"
});

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
</head>
<body>
  <div style="float:left";>
    <input type="range" id="slider1" min="0"        max="100" value="50"> 
  </div>
  <div style = "float:left;">
    <p id = "sliderText1" style = "margin-top:      2px; margin-left: 2px; border-style:          solid"></p>
  </div> 
<script src="script.js"></script>
</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。