不幸的是，没有标准的事件可以知道选择框何时关闭或打开，因此您的代码将非常繁琐，可以适应不同的浏览器。也就是说，我认为这是可以做到的，而且我已经使用该mouseup事件在 Firefox 中为您提供了一些有用的东西：

http://jsfiddle.net/FpfnM/50/

在 Firefox（我假设是 Chrome）中，您需要非常仔细地跟踪该选择的状态。当escape按下某个键或blur发生事件时，您需要更新状态以将其标识为已关闭。我没有在我的演示中实现它，你可以看到如果你点击转义而不是点击选择会发生什么。

在 Safari 中事情更容易，其中mousedown选择上的事件表示打开选择，选择的任何关闭都由click事件表示。

如果您发现浏览器没有触发这些事件，您可以尝试一个额外的技巧。因为像 select 和 textarea 这样的表单小部件通常由操作系统呈现，而不是在浏览器内部呈现，所以您可能会与它们交互，并且某些消息可能不会进入浏览器的事件处理程序。如果您在选择框打开时将覆盖屏幕的透明文本区域定位在较低的 z-index 处，您或许可以使用它来跟踪关闭的点击。它可能能够捕获浏览器 DOM 元素可能错过的事件。

更新： Chrome 在打开时在选择上看到鼠标按下，在打开选择时单击页面时在文档上看到鼠标上移。这是一个适用于 Chrome 的版本：

http://jsfiddle.net/FpfnM/51/

同样，您需要进行一些浏览器检测以处理每个浏览器中的正确行为。特别是 Chrome 的一个问题是，当您第二次单击选择以关闭它时，不会触发任何事件。但是，您可以检测页面点击。

快速总结：

Chrome/Safari: select.mousedown on open, document.mouseup on close
Firefox: select.click on open, document.mouseup on close
IE8/IE7: select.click on open, document.mouseup on close

其他事件有很多边缘情况意味着关闭（退出按键、模糊等），但这些是处理用户单击选择框然后单击进入文档区域的情况的最低限度.

希望这可以帮助！

当你有超过 1 个下拉菜单时：

        $("select").each(function () {
        var initDropdown = $(this);
        initDropdown.data("open", false);
        console.log(this.name + "   closed");

        initDropdown.on("blur", function () {
            var blurDdopdown = $(this);
            blurDdopdown.data("open", false);
            console.log(this.name + "   closed");
        });
    });

    $("select").bind("click", function () {
        var clickedDropdown = $(this);

        if (clickedDropdown.data('open') == false) {
            clickedDropdown.data('open', true);
            console.log(this.name + "   open");
        } else {
            clickedDropdown.data('open', false);
            console.log(this.name + "   closed");
        }
    });

我按照您的 JSFiddle 上的说明收到了以下事件：

BODY, mousedown, STRONG
#document, mousedown, STRONG
window, mousedown, STRONG
SELECT, blur, SELECT
BODY, click, STRONG
#document, click, STRONG
window, click, STRONG

这些都是在选择菜单已经处于焦点并展开后单击“此处”时触发的所有事件。这是在最新版本的 Chrome 中。

这些中的任何一个都不能满足您的目的吗？

编辑：如果您想确保是您的 Select 元素失去焦点，请设置全局 Javascript 变量“selectFocused”，并将其设置为 False。当您的选择菜单获得焦点时将其设置为 True，并在发生上述任何事件时将其设置为 False。'selectFocused' 现在可以在代码中的任何地方使用，以检测您的 Select 元素当前是否具有焦点，并且当它更改值时，您就知道您的 Select 元素已被选中或未选中。

我的第一直觉是实现这一点的方式有点迂回，这将是使用您通常用于在按下外部时关闭（自定义）下拉菜单的代码：

function clickInBody(){
 functionToCallOnBlur();
}

function clickInBodyStop(event){
    event.stopPropagation();
}

然后在你的 body 标签上添加onClick="clickInBody()"，在你选择的项目上添加onClick="clickInBodyStop(event)"。这应该在您每次点击页面时调用该事件，但是如果您点击 select 标签，它将停止传播而不是调用functionToCallOnBlur()

前提条件：使用jQuery！这可能只能解决您的部分问题，但如果您正在寻找在单击元素时触发的事件，则可以使用叠加 div。

当用户点击选择框时：

$('#mySelectBox').click(function () {
    var myOverlayDiv = $('<div id="overlayDiv" class="overlayDiv"></div>')
    .click(function () {
        // call your "select lost focus" function here
        // which should include $('#overlayDiv').remove() somewhere!
    })
    .show()
    .appendTo(document.body);
});

叠加 div 的样式：

.overlayDiv {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
z-index:1000;
}

您需要确保您的选择框菜单具有更高的 Z-index，因此当用户单击菜单时，他们会获得菜单而不是叠加 div :)