javascript - 输入事件 - 拖动输入元素时失去焦点

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" 。因此，行为是不明确的，浏览器应该允许您移动轨迹球还是浏览器应该在页面周围拖动元素？

这两种行为是冲突的，因此首先它可以作为输入范围正常工作，并且您可以移动它，但随后它允许您拖动元素。

您的预期行为是什么？

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">