HTML 如果在 chrome 中突出显示，则输入范围类型将无法通过拖动操作使用

Question

考虑 Chrome 浏览器中 Windows 上显示的以下示例。

<input type="range">

它产生一个范围滑块。我发现如果我第一次使用我的鼠标并且

将鼠标向下移动到范围滑块下方
在仍然按下鼠标按钮的情况下，将鼠标移过范围滑块到它的顶部
松开鼠标

我可以让范围滑块按预期停止工作。它显示一个“带有一条线的圆圈”光标，并且不允许我向右或向左滑动手柄。

我的理论是，我采取的第一个操作是“select”或“突出显示”范围 select，或者，就像 select 浏览器中的一段文本一样, 然后我随后尝试操作范围滑块被解释为我想拖动 selection.

是否有任何解决方法或方法来避免此错误？

到目前为止，在 input 元素上设置 css user-select: none; 等尝试均无效，在 drag 事件上调用 e.preventDefault() 也无效。

在GIF中查看效果：

Answer 1

经过一些修改后，我能够使用以下 JS 停止此行为：

document.querySelectorAll('input[type="range"]').forEach((input) => { 
    input.addEventListener('mousedown',  () => window.getSelection().removeAllRanges());
});

HTML 如果在 chrome 中突出显示，则输入范围类型将无法通过拖动操作使用

HTML Input range type becomes un-usable by drag action if highlighted in chrome

html

javascript

google-chrome

html-input