考慮以下在 Chrome 瀏覽器中顯示在 Windows 上的示例。
<input type="range">它產生一個范圍滑塊。我發現如果我第一次使用我的滑鼠并且
- 滑鼠向下略低于范圍滑塊
- 仍然按下滑鼠按鈕，將滑鼠跨過范圍滑塊移動到它的頂部
- 釋放滑鼠
我可以使范圍滑塊按預期停止運行。它顯示一個“有一條線穿過它的圓圈”游標，并拒絕讓我向右或向左滑動手柄。
我的理論是，我采取的第一個操作“選擇”或“突出顯示”范圍選擇器，就像在瀏覽器中選擇一段文本一樣，然后我隨后嘗試操作范圍滑塊的嘗試被解釋為我想要拖動選擇。
是否有任何解決方法或方法可以避免此錯誤？
到目前為止嘗試，如CSS設定user-select: none;上的input元素沒有作業，沒有不呼叫e.preventDefault()的drag事件。
在 GIF 中查看效果：
uj5u.com熱心網友回復：
經過一番修改后，我能夠使用以下 JS 停止這種行為：
document.querySelectorAll('input[type="range"]').forEach((input) => {
input.addEventListener('mousedown', () => window.getSelection().removeAllRanges());
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/312659.html