当在窗口中的任何位置单击选择框时，如何获得选择框关闭事件

How can i get Select box close event when click out of the select box any where in window?

本文关键字：选择 何获得 事件 任何 位置 单击 窗口      更新时间：2023-09-26

当单击窗口内任何位置的选择框时，如何获得选择框关闭事件。

我的要求是。我想专注于选择框关闭事件的另一个输入。

我尝试了这么多 j Query 事件，但在打开选择框时在窗口（浏览器）上找不到任何单击事件。

在这里，我

与您分享我检查示例的步骤。

  1. 单击选择框时，您将在控制台中单击"正文"。
  2. 在窗口中的任何位置单击框外部，您会发现选择框已关闭，但不会获得任何事件。 :(
  3. 我得到了一个 on Change 事件，但只有当我选择某个值时，但我希望如果有人单击选择框的一侧，它应该像我们一样接近，但我们也可以将注意力集中在其他元素上。

请找到以下静态示例，这是非常简单的代码（示例），所以我不会生成 jsfiddle。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(e) {
        $(window).click(function(){
          console.log("body clicked");
        });
      });
    </script>
  </head>
  <body>
    <select id="mySelect">
      <option value="0">Initial Value 1</option>
      <option value="1">Initial Value 2</option>
      <option value="2">Initial Value 3</option>
      <option value="3">Initial Value 4</option>
    </select>
  </body>
</html>

select元素没有onClose事件。您可以使用如下所示的 $.focusout 事件处理程序：

$('#mySelect').focusout(function(){
    console.log('Dropdown list 1 losing focus...');
    $('#anotherElement').focus();
});

这样，当您在框外单击时，将触发 focusout 事件，并将触发另一个元素的 focus 事件。

小提琴可用 这里.

$(document).ready(function (e) {
    $('#mySelect1').focusout(function(){
        console.log('Dropdown list 1 losing focus...');
        $('#mySelect2').focus();
    });
});
select{
    margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myselect1">Dropdown list 1</label>
<select id="mySelect1">
    <option value="0">Initial Value 1</option>
    <option value="1">Initial Value 2</option>
    <option value="2">Initial Value 3</option>
    <option value="3">Initial Value 4</option>
</select>
<br />
<label for="myselect2">Dropdown list 2</label>
<select id="mySelect2">
    <option value="0">Initial Value 5</option>
    <option value="1">Initial Value 6</option>
    <option value="2">Initial Value 7</option>
    <option value="3">Initial Value 8</option>
</select>

相关文章：