Как вызвать событие focusout на элементе ul?

Question

У меня есть плагин, который изменяет внешний вид тега select html во всех браузерах.

Я пытаюсь заставить новый стилизованный набор элементов вести себя как обычный тег select. Я почти у цели, но мне нужно понять только одну вещь, а именно, как скрыть ul на фокусе.

Во-первых, вот демонстрация нового элемента select (не на английском языке, но вы можете легко найти его ^^): http://mahersalam.co.cc/projects/n-beta/

Если вы нажмете кнопку переключения элемента select, а затем нажмете прочь, элемент ul с параметрами не исчезнет. Это потому, что я не могу запустить событие focusout на этом ul.

Вот код, управляющий обработкой событий:

// Make a div which will be used offline and then inserted to the DOM
$namodgSelect = $('<div class="namodg-select"></div>');

/* other stuff ... */

$namodgSelect // Handle all needed events from the wrapper
    .delegate('a', 'click focus blur', function(e) {

        // Type of the event
        var type = e.type,

        // Declare other vars
            id,
            $this;

        e.preventDefault(); // Stop default action

        // Make an id ot the element using it's tag name and it's class name
        // Note: Because we add a class on the active toggler, it's easier to remove it from here and the logic will still work
        id = e.target.tagName.toLowerCase() + '.' + e.target.className.replace(' toggler-active', '');

        switch (id) {

            case 'p.selected': case 'div.toggle-button':

                // Only accept 'click'  on p and div
                if ( type != 'click') {
                    return;
                }

                // Show and hide the options holder
                if ( $optionsHolder.data('hidden') ) {

                    $selectElem.focus();

                    // This needs to run fast to give feedback to the user
                    $toggler.addClass('toggler-active').data('active', true);

                    // Show the options div
                    $optionsHolder.stop(true, true).slideDown('fast', function() {

                        // Sometimes fast clicking makes the toggler deavtive, so show it in that case
                        if ( ! $toggler.data('active') ) {
                           $toggler.addClass('toggler-active').data('active', true);
                        }

                    }).data('hidden', false);

                } else {

                    $selectElem.blur();

                    // Hide the options div
                    $optionsHolder.stop(true, true).slideUp(function() {

                        // Only hide the toggler if it's active
                        if ( $toggler.data('active') ) {
                           $toggler.removeClass('toggler-active').data('active', false);
                        }

                    }).data('hidden', true);

                }
                break;

            case 'a.toggler':
                switch (type) {
                    case 'focusin':
                        $selectElem.focus();
                        break;
                    case 'focusout':
                        // Only blur when the options div is deactive
                        if ( $optionsHolder.data('hidden') ) {
                            $selectElem.blur();
                        }
                        break;
                    case 'click':
                        $selectedHolder.click();
                        $selectElem.focus();
                }
                break;

           case 'a.option':
               // Stop accept click events
               if ( type != 'click') {
                    return;
                }

                // cache this element
                $this = $(this);

                // Change the value of the selected option and trigger a change event
                $selectedOption.val( $this.data('value') ).change();

                // Change the text of the fake select and trigger a click on it
                $selectedHolder.text( $this.text() ).click();
                break;
        }
    })

Весь код можно увидеть из демо. Как видите, я уже использую событие focusout для переключателя и его параметров, поэтому не могу скрыть ul, когда это произойдет (это отключит функцию вкладки).

Если кто-нибудь может мне помочь с этим, это будет оценено. Спасибо.

Answer 1

Попробуйте подключить плагин jQuery для внешних событий Позволит вам сделать что-то вроде:

$(this).bind( "clickoutside", function(event){
  $(this).hide();
});

Answer 2

Мне удалось скрыть панель параметров, используя этот код:

$(document).click(function() {
    if ( $optionsHolder.data('hidden') || $optionsHolder.is(':animated') ) {
        return;
    }
   $selectedHolder.click();
})

Это работает, потому что фокусировка на другом входе похожа на щелчок по document.