爲什麼拖動選擇列表更改或清除選擇？

在Chrome和Safari中，如果我從具有size屬性的<select>列表外部進行拖動（即將其呈現爲列表而非下拉列表），則所選選項會更改或者所選內容完全消失。活例如：爲什麼拖動選擇列表更改或清除選擇？

<p>Click anywhere outside the list below and drag over the list. Observe that the selected option becomes deselected.</p> 
 
<select size="4"> 
 
    <option selected="">option</option> 
 
    <option>option</option> 
 
    <option>option</option> 
 
</select>

在Windows 7和OS X約塞米蒂在鉻39觀察（編輯：仍然存在於鉻43上約塞米蒂至少），而在野生約塞米蒂8。 Internet Explorer 11不顯示相同的行爲。

如果您不注意，並且在輸入中選擇了一些文本，例如使用鼠標溢出很容易，並且意外更改選擇，甚至沒有意識到。

這種行爲是否有很好的理由？有沒有辦法（例如通過CSS/JavaScript）阻止它發生？我已經嘗試過dragenter/dragover事件處理，但是除非真的被拖動，否則它們不會被觸發，而這種行爲即使在您拖拽列表中的空白處時也會發生。

來源

2014-10-30 CupawnTae

這顯然是在執行過程中的錯誤。你可以在blink bugzilla中創建bug。 – 2015-07-22 22:53:24

和webkit的我猜。萬歲的零碎 – CupawnTae 2015-07-22 22:55:26

好吧，所以這可能是一個錯誤（應該報告），但修復很簡單。只有preventDefault()爲select元素的onmousemove事件。

我的猜測是該錯誤與某些與拖拽相關的代碼有關。

演示：

var elem = document.getElementById('myselect'); 
 
elem.onmousemove = function(e){ 
 
    e.preventDefault(); 
 
};

<p>Click anywhere outside the list below and drag over the list. Observe that the selected option becomes deselected.</p> 
 
<select id="myselect" size="4"> 
 
    <option selected="">option</option> 
 
    <option>option</option> 
 
    <option>option</option> 
 
</select>

希望這有助於:)

來源

2015-07-22 23:42:37

很好地完成。 Bug也報道。 – CupawnTae 2015-07-22 23:57:18

爲什麼拖動選擇列表更改或清除選擇？

回答

相關問題