흐리게 선택 상자를 닫으려면 크롬에서 작동하지 않습니까?

Question

사용자가 선택 상자를 클릭하면 선택 상자에 이벤트를 발생 시켜서 수행하는 옵션 메뉴를 숨기려고합니다. 다음 코드는 firefox에서는 작동하지만 크롬에서는 작동하지 않습니다.

<select id="myselect" name="city"> 
       <option value="default" id="first">Default value</option> 
      </select> 



     <script type="text/javascript"> 

      $('#myselect').click(function(){ 
       $(this).blur(); 

      }); 

     </script> 

크롬 옵션 메뉴에는 그대로 있습니다.

Answer 1

여기 내 문제 클래스 "옵션"선택 상자의 모든 옵션을 나타냅니다

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; 
     if(is_chrome) $(".option").hide(); 

내 해킹입니다.

Answer 2

나는 이것이 사용자 모달 상태와 관련이 있다고 생각합니다 (지원할 문서를 찾을 수는 없지만 추가 할 수도 있음). 사용자가 옵션을 선택할 때까지 모든 이벤트 리스너가 무시됩니다. http://jsfiddle.net/TkfPN/

그것은 훨씬 더 좋을 것이다 단순히 <select> 요소를 사용하지 않도록 :

는이를 지원하기 위해, 당신은 우리가 <select>의 onchange 이벤트에 연결시, $(this).blur() 화재가 예상대로 정확하게 볼 수 있습니다. 초점을 맞춘 요소를 흐리게 처리하는 것은 매우 나쁜 HCI이며 사용자에게는 실망 스럽습니다.

Answer 3

해결책을 찾았습니다. 선택 상자의 노드를 삭제 한 다음 다시 추가하십시오! 위임 된 이벤트 핸들러를 사용하고 있는지 확인하십시오. 모든 브라우저에서 작동하는 것 같습니다. 여기 jQuery에 대한 나의 해결책이있다. 그러나 누군가가 순수한 JS 솔루션을 작성하려고한다면 그것은 또한 좋을 것이다.

jQuery('.sortSelect').appendTo('.sortParent'); 

sortSelect가 sortParent의 마지막 직접 하위 인 경우이 예제의 마크 업은 작동합니다. $ .insertAfter()/$. insertBefore()도 작동합니다.