关闭 HTML 选择元素时是否会触发 DOM 事件？

Question

我正在寻找一个 DOM 事件，当一个已打开（但未更改选项）的选择元素然后通过单击页面上其他位置（任何地方）的选择元素关闭时，我可以使用 JavaScript 监听该 DOM 事件。

这不是选择的blur事件，因为选择保留焦点。 同样，它不是某个其他元素或文档的focus事件，也不是mousedown或click窗口、文档或正文。

这不是选择的change事件，因为选择中的任何选项都没有更改。

我不关心旧的 Internet Explorer - 只是在符合标准的现代浏览器中工作。 不过，专有黑客可能值得了解。

我创建了一个 JSFiddle 来演示这个问题： http : //jsfiddle.net/premasagar/FpfnM/

1. 单击“结果”面板中的选择框
2. 单击标记为“HERE”（或其他任何地方）的文本，查看是否有任何事件添加到日志中。 最新的 Chrome 或 Firefox 中没有事件。

所以问题是：可以添加什么 JavaScript，以便在单击选择框时记录事件？

（我在这里问了一个类似但不同的问题：
iOS 上的 JavaScript：打开 HTML 选择元素）

Answer 1

不幸的是，没有标准事件可以知道何时关闭或打开选择框，因此您的代码将非常多毛，适用于不同的浏览器。 也就是说，我认为它可以完成，并且我已经使用mouseup事件在Firefox中为你工作了一些东西：

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

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

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

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

更新： Chrome在打开时会在选择中看到mousedown，在选择打开时单击页面时会在文档上看到鼠标。 这是适用于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

其他事件有很多边缘情况表示关闭（转义按键，模糊等），但这些是处理用户单击选择框然后单击进入文档区域的情况的最小值。

希望这可以帮助！

Answer 2

如果您有超过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");
        }
    });

Answer 3

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

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

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

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

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

Answer 4

我的第一直觉是实现这一目标的一个小迂回，它将使用您通常用于关闭外部按下（自定义）下拉菜单的代码：

function clickInBody(){
 functionToCallOnBlur();
}

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

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

Answer 5

前提条件：使用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索引，所以当用户点击菜单时，他们得到菜单而不是叠加div :)

Answer 6

如果我们考虑在选择框外面点击，则可以是结束选择事件的信号。

以下jQuery可以做到这一点。 这是小提琴中的代码

$(function () {
    let flag = 0;

    $("#selectId").click(function (e) {
        e.stopPropagation();
        if (flag === 0) {
            flag = 1;
            $(document).one("click", function () {
                flag = 0;
                alert("select end");
            });
        }
    });
});

Html代码：

<select multiple id="selectId">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>

Answer 7

答案是“是”，有这样一个事件，称为blur事件。 它非常通用，取决于 html 元素。

对于HTMLSelectElement ，当您退出元素的focused状态时会调用 blur ，这意味着您已将其关闭。

同样可以focus说，它可以被假定为HTMLSelectElement元素的“打开”状态的替代品。

这是关闭HTMLSelectElement元素时执行callback的HTMLSelectElement ：

 var select= document.getElementById("mySelect"); function doSomethingOnBlur(event){ console.log("Yey! The select options were closed."); } select.addEventListener("blur", doSomethingOnBlur);

 <select id="mySelect"> <option selected hidden></option> <option>Some Item</option> </select>

请务必注意，选项是根据选择的状态呈现的。 当您focus于它时，它会打开。 当你失去focus （ blur ）时，它就会关闭。 所以从技术上讲，这只是一个词的选择......