размытие, чтобы закрыть окно выбора не работает в хроме?

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

Я подозреваю, что это связано с пользовательским модальным состоянием (хотя я не мог найти документацию для его поддержки, я мог бы добавить). Я подозреваю, что любые прослушиватели событий игнорируются, пока пользователь не сделает выбор из параметров.

Для поддержки этого, вы можете увидеть, что $(this).blur() пожары точно так, как ожидается, когда мы привязываем его к onchange случае <select>: http://jsfiddle.net/TkfPN/

Было бы гораздо лучше просто отключить <select> элемент. Размытие сфокусированного элемента крайне плохой HCI и разочарование пользователя.

Answer 3

Я нашел решение этого вопроса. Просто удалите узел окна выбора и добавьте его обратно! Убедитесь, что вы используете делегированные обработчики событий. Кажется, работает во всех браузерах. Вот мое решение в jQuery, но если кто-то хочет написать чистое решение JS, это тоже хорошо.

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

Если бы не было appearant, разметка в данном примере работает, если sortSelect является последним прямым потомком sortParent. $ .insertAfter()/$. insertBefore() будет работать.