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

Question

Когда пользователь нажимает на поле выбора, я хочу скрыть меню опций, которое я запускаю, вызывая событие размытия в окне выбора. Следующий код работает на Firefox, но не на Chrome.

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



        <script type="text/javascript">

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

            });

        </script>

В меню параметров Chrome остается без изменений.

Answer 1

Вот мой взлом для моей проблемы

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

где класс "option" представляет все опции окна выбора.

Answer 2

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

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

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

Answer 3

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

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

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