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

i1icjdpr 于 2023-03-05 发布在 Go

关注(0)|答案(2)|浏览(127)

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

<input type="range">

它会产生一个范围滑块。我发现如果我第一次使用鼠标和
1.鼠标按下略低于范围滑块
1.鼠标按钮仍然按下移动鼠标越过范围滑块到它的顶部
1.释放鼠标
我可以让范围滑块停止预期的功能。它显示一个“有一条线穿过的圆圈”光标，并拒绝允许我向右或向左滑动手柄。
我的理论是，我首先“选择”或“突出显示”范围选择器，就像在浏览器中选择一段文本一样，然后我随后尝试操作范围滑块被解释为我想拖动选择。
是否有任何变通方案或方法可以避免此错误？
到目前为止，诸如在input元素上设置css user-select: none;之类的尝试都不起作用，在drag事件上调用e.preventDefault()也不起作用。
查看GIF中的效果：

google-chrome

来源：https://stackoverflow.com/questions/69490604/html-input-range-type-becomes-un-usable-by-drag-action-if-highlighted-in-chrome

2条答案

按热度按时间

0lvr5msh1#

经过一些修改后，我可以使用以下JS来停止这种行为：

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

赞(0）回复(0）举报 2023-03-05

pgccezyw2#

接受的解决方案不适用于我（chrome）。此版本适用于：

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

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

赞(0）回复(0）举报 2023-03-05

我来回答

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

2条答案

相关问题

热门标签

最新问答