时间戳

首页 > 解决方案 > 当我拖动范围滑块时，什么 DOM 事件允许持续触发？

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

问题描述

我目前有一个滑块和它旁边的一个框，我想在其中显示滑块的当前值。当我将滑块从 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>

标签： javascriptdommouseevent

解决方案

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

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

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>

推荐阅读