UL 失去焦点时 OnFocusOut 不起作用答案

【问题标题】：OnFocusOut not working when UL loses focusUL 失去焦点时 OnFocusOut 不起作用
【发布时间】：2016-02-19 10:09:47
【问题描述】：

我需要你的帮助，

对于我的一生，我似乎无法弄清楚为什么我不能设置$("#fileno_list").css("display", "none"); 即。当用户尚未完全做出选择并决定单击页面上的其他位置时。然后下拉框应该关闭。（显示：无）。

这是问题的图片：

这是问题中的代码：

<script type="text/javascript">
$(document).ready(function() {


    $("#fileno_list ul").focusout(function() {

        $(this).css("display", "none");


    });



});

function test() {

var rs_count = 3

    if (rs_count > 1) {

        for (var x = 0; x < rs_count; ++x) {

            $("#fileno_list").append('<li>'+x+'</li>');

        }

        $("#fileno_arrow").css("display", "block");

    }

    $("#fileno_arrow").click(function() {

        $("#fileno_list").css("display", "block");

    });

    $("#fileno_list li").click(function(e) {

        var select = $(this).closest('#fileno_list')

        select.find(".selected").removeClass('selected');

        $(this).addClass('selected');

        $("#fileno").val(   $.trim( $(this).html()  )   )

        $("#fileno_list").css("display", "none");

    });

    $("#fileno").val( $("#fileno_list li").eq(0).html() )

}



</script>

这是 HTML 标记：

<div class="field_container">

    <div class="field_wrapper"><input type="text" class="field" id="fileno"></div>

    <div id="fileno_arrow"></div>

    <ul id="fileno_list"></ul>


</div>
<br>
<br>

<input type="button" onclick="test()" value="click me">
<br>

【问题讨论】：

onfocusout 和 onblur are different 并且，这看起来像 onblur 在这里可以工作。另外，MDN says Firefox 不支持 onfocusout ......那么你测试的是什么浏览器？
这将是 Internet Explorer 10
所以...我们有嵌套列表<ul><li> <ul>...</ul></li>，它们构成了一些用javascript增强的css驱动的多级下拉菜单，这给了我们类似的情况...菜单保持不变即使您将鼠标移开，也会在计时器上打开，但如果您单击远离它，我们会立即关闭它。在我们的例子中，我们只是将 onclick 处理程序附加到 <body> 并执行 .removeClass('opened') 而不是对焦点事件进行操作。

标签： javascript jquery

【解决方案1】：

假设您的选择标签有一个 id，您可以使用 event 对象来检查哪个元素被点击并根据它显示/隐藏。

 $(document).click(function(e) {
        if(e.target.id === "idOfSelect")
          $("#idOfSelect").show();
    });

【讨论】：

这似乎解决了单击on 选择列表的问题，但问题是单击离开并关闭它，因为它失去了焦点。