请考虑以下示例,该示例显示在Windows的Chrome浏览器中。
<input type="range">
它会产生一个范围滑块。我发现如果我第一次使用鼠标和
1.鼠标按下略低于范围滑块
1.鼠标按钮仍然按下移动鼠标越过范围滑块到它的顶部
1.释放鼠标
我可以让范围滑块停止预期的功能。它显示一个“有一条线穿过的圆圈”光标,并拒绝允许我向右或向左滑动手柄。
我的理论是,我首先“选择”或“突出显示”范围选择器,就像在浏览器中选择一段文本一样,然后我随后尝试操作范围滑块被解释为我想拖动选择。
是否有任何变通方案或方法可以避免此错误?
到目前为止,诸如在input
元素上设置css user-select: none;
之类的尝试都不起作用,在drag
事件上调用e.preventDefault()
也不起作用。
查看GIF中的效果:
2条答案
按热度按时间0lvr5msh1#
经过一些修改后,我可以使用以下JS来停止这种行为:
pgccezyw2#
接受的解决方案不适用于我(chrome)。此版本适用于: