Question

在类型范围为正的输入状态下，如何每隔几毫秒运行一次JavaScript函数？

我当前正在使用更改，但拖动结束后仅触发一次。我想为拖曳中的东西做动画...

range.addEventListener('change', adjustPath, false)

我必须使html元素可拖动吗？

Answer 1

使用"input"事件而不是"change"。在拖动过程中，它应以“滴答声”触发。 “滴答”是指在拖动过程中滑块当前的值发生变化。

请注意以下前两个输入之间的差异。第一个将“打勾”更多，因为滑块上有更多的值。

第二个值具有稀疏值，因此当您实际拖动时，只有接近下一个值时，您才看到“输入”。

如果您想要的更多控制权，还可以附加鼠标上/下/移动监听器，并为它们添加额外的逻辑。考虑一下不管值多么稀疏，第三个滑块将如何记录日志。

function inputHandler() {
  console.log("input");
}

function changeHandler() {
  console.log("change");
}

const r1 = document.getElementById("r1");
r1.addEventListener("input", inputHandler);
r1.addEventListener("change", changeHandler);

const r2 = document.getElementById("r2");
r2.addEventListener("input", inputHandler);
r2.addEventListener("change", changeHandler);

const r3 = document.getElementById("r3");
let down = false;
r3.addEventListener("mousedown", () => {
  down = true;
});
r3.addEventListener("mousemove", () => {
  if (!down) return;
  console.log("mmove");
});
r3.addEventListener("mouseup", () => {
  down = false;
});

label {
  display: block;
}

<label><span>R1</span> <input id="r1" type="range" min="0" max="100" value="20"></label>
<label><span>R2</span> <input id="r2" type="range" min="0" max="3" value="1"></label>
<label><span>R3</span> <input id="r3" type="range" min="0" max="3" value="1"></label>

如何获取类型范围输入的拖动事件？

1 个答案: