Question

我正在尝试使用范围输入来制作得分模块。我正在使用input事件来实现这一目标。范围输入工作正常，但是当我添加事件时，拖动开始后不久便失去焦点。

外观如下：

document.querySelector("#score").addEventListener("input", e => {
  console.log(e.target.value);
});

<input type="range" min="1" max="10" value="10" draggable="true" class="score theme" id="score" step="0.1">

Answer 1

draggable="true"并没有您认为的那样。 <input type="range">默认具有可拖动组件。 draggable attribute使其可以拖动 entire 元素。

删除此属性可提供预期的行为：

document.getElementById('score').addEventListener('input', e => {
  console.log(e.target.value);
});

<input type="range" min="1" max="10" value="10" id="score" step="0.1">

Answer 2

发生这种情况是因为您向元素添加了draggable="true"。因此，这种行为是模棱两可的，浏览器应该允许您移动轨迹球还是浏览器应该在页面上拖动元素？

这两种行为是冲突的，因此，在第一时间它就可以作为输入范围正常工作，并且可以四处移动，但是随后您可以拖动该元素。

您的预期行为是什么？

document.querySelector("#score").addEventListener("input", e => {
    console.log(e.target.value);
 });

    <input type="range" min="1" max="10" value="10" class="score theme" id="score" step="0.1">

Answer 3

这似乎是draggable="true"属性的问题，而不是JavaScript代码的问题。 draggable属性使我们可以使元素在DOM周围可拖动，即从视口中的一个位置移动到另一位置。

因此，当人们尝试拖动范围手柄时，整个滑块将被拖动，而不仅仅是手柄，这就是您所说的“失去焦点”。

因此，解决方案是仅删除draggable=true属性。我在CodePen上用笔进行了演示。 https://codepen.io/aryan_02/pen/WPNBYm

请注意draggable属性的作用。希望对您有帮助。