如何在 ul 元素上触发 focusout 事件？

我有一个可以改变外观的插件select所有浏览器上的 html 标签。

我正在尝试使新样式的元素集表现得像正常元素一样select标签。我快到了，但我只需要弄清楚一件事，那就是如何隐藏ul集中注意力。

首先，这是新的 select 元素的演示（不是英文，但你可以轻松找到它^^）：http://mahersalam.co.cc/projects/n-beta/ http://mahersalam.co.cc/projects/n-beta/

如果单击选择元素的切换按钮，然后单击离开，则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;
        }
    })

整个代码可以从demo中看到。正如你所看到的，我已经使用了focusout切换器和选项上的事件，所以我无法隐藏ul发生这种情况时（这将禁用选项卡功能）。

如果有人能帮助我解决这个问题，我将不胜感激。谢谢。

尝试一下jQuery 外部事件插件 http://benalman.com/projects/jquery-outside-events-plugin/会让你做类似的事情：

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