jQuery: Как отменить событие размытия, если элемент, который получит фокус, имеет определенный тип?

Question

Я пишу пользовательский интерфейс формы и в настоящее время строю замену окна выбора. Пользовательский элемент управления select - это, в основном, div с скрытым (за пределами экрана) входом select, а также с диапазоном, содержащим элементы привязки, отражающие параметры ввода select:

<span class="input select">   
    <span id="select-select1" class="select-input"><span><span>This is the second option <a class="button" href="#"></a></span></span></span>    
    <span id="select-select1-options" class="select-options">
        <a value="1" href="#"><span>This is the first option</span></a>
        <a value="2" href="#"><span>This is the second option</span></a>
        <a value="3" href="#"><span>This is the third option</span></a>
    </span>    
    <select name="select1" id="select1" tabindex="2">
        <option value="1">This is the first option</option>
        <option value="2">This is the second option</option>
        <option selected="selected" value="3">This is the third option</option>
    </select>
</span>

Когда пользователь перемещается по полю или щелкает по нему, он на самом деле фокусируется на скрытом выборе; родительский диапазон затем выделяется (с добавлением класса CSS), чтобы они могли видеть, какое поле имеет фокус.

$('.input select').bind('focus', function() {

    $(this).closest('.input').addClass('focused');

}).bind('blur', function(e) {

    $(this).closest('.input').removeClass('focused');

});

Однако вот что происходит:

1. Пользователь нажимает пользовательский выбор. Интервал выделен, чтобы показать, что он имеет фокус, и отображаются опорные привязки.
2. Пользователь щелкает параметр, и привязки параметров снова скрываются. Но так как выбранный параметр является привязкой, он получает фокус, и основное выделение выбора исчезает, когда оно должно оставаться (потому что мы все еще хотим, чтобы выделение имело фокус).

Итак, я пытаюсь добиться того, чтобы при щелчке по одному из якорей в элементе управления произвольного выбора не происходило событие размытия на скрытом входе выбора.

Какой лучший способ сделать это?

P.S. Извините, если это немного сбивает с толку, это довольно сложно объяснить ясно!

Answer 1

Я на самом деле строю замену пользовательского selectbox, а также считаю, что все текущие решения отсутствуют. Вы можете попробовать e.preventDefault(), чтобы увидеть, отменяет ли это событие размытия, но мой предпочтительный метод - просто вернуть фокус на выборку, если щелкнуть привязку, с $(this).closest('input').focus();

Кроме того, есть ли причина, по которой вы уделяете внимание скрытому выбору? Вы можете позволить вашему диапазону захватывать фокус (и отвечать на вкладки), устанавливая его tabindex:

$('.input').attr("tabindex", $('.input select').attr("tabindex") || "0");

А затем не позволяйте скрытому вводу захватывать фокус, полностью скрывая его:

$('.input select').hide();