왜 선택 목록 위로 끌면 선택이 변경되거나 지워 집니까?

Question

크롬 및 Safari에서 size 속성이있는 <select> 목록 외부에서 드래그하면 (즉, 드롭 다운이 아닌 목록으로 렌더링 됨) 선택한 옵션이 변경되거나 선택 항목이 모두 사라집니다. 예 라이브 : 윈도우 7 OS X 요세미티에서 Chrome 39에서 관찰

<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>

(EDIT : 요세미테 적어도 크롬 43에 여전히 존재) 요세미티 사파리 8. Internet Explorer 11에서 동일한 문제가 발생하지 않습니다.

주의를 기울이지 않고 입력에서 일부 텍스트를 선택하는 경우 마우스를 사용하여 오버런하고 실수로 선택을 실수로 변경하지 않아도됩니다.

이 동작에 대한 이유가 있습니까? CSS/javascript를 통해) 중단되는 것을 막을 수있는 방법이 있습니까? dragenter/dragover 이벤트 처리를 시도했지만 무언가가 실제로 드래그되지 않는 한 실행되지 않습니다. 반면에이 동작은 목록 위에 빈 공간을 "드래그"하는 경우에도 발생합니다.

Answer 1

그래, 버그 일 수 있으므로 (보고해야 함) 수정 사항은 매우 간단합니다. select 요소의 onmousemove 이벤트의 경우 preventDefault()입니다.

내 생각 엔 버그는 드래그 관련 코드와 관련이 있습니다.

데모 :

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>

희망이 도움이 :)