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

Question

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

<input type="range">

它产生一个范围滑块。我发现如果我首先使用鼠标

1. 鼠标向下稍微低于范围滑块
2. 仍然按住鼠标按钮，将鼠标移过范围滑块到其顶部
3. 释放鼠标

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

我的理论是，我采取的第一个操作“选择”或“突出显示”范围选择器，就像在浏览器中选择文本的一部分一样，然后我随后尝试操作范围滑块被解释为我想要拖动选择。

有什么解决办法或方法可以避免这个错误吗？

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

看GIF效果：

Answer 1

接受的解决方案对我不起作用（chrome）。这个版本做了：

const stop = function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
};

document.querySelectorAll('input[type="range"]').forEach((input) => { 
    input.draggable = true;
    input.addEventListener('dragstart', stop);
});