简体   繁体   English

从窗口中的任何位置单击选择框时,如何获得选择框关闭事件?

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

How can i get Select box close event when click out of the select box any where in window. 从窗口中的任何位置单击选择框时,如何获得选择框关闭事件。

My requirement is. 我的要求是。 I want to focus on another input on select box close event. 我想重点关注选择框关闭事件的其他输入。

I tried with so many j Query events but i can't find any click event on window (browser) when select box is open. 我尝试了很多j查询事件,但是当选择框打开时,我在窗口(浏览器)上找不到任何单击事件。

Here i am sharing you my step to check an example. 在这里,我与您分享我检查示例的步骤。

  1. When click on select box and you'll have 'body clicked' in Console. 单击选择框后,您将在控制台中“单击身体”。
  2. Click outside of the box any where in window and you'll find that select box is close but you won't get any event. 在窗口中的任何位置单击框外,您会发现选择框已关闭,但不会发生任何事件。 :( :(
  3. I am getting an on Change event but only when i select some value, but i want if someone click out side of select box the it should be close as we have but we can drive focus on other element as well. 我收到一个on Change事件,但仅当我选择一些值时,但我想如果有人单击选择框的一侧,它应该像我们所选择的那样靠近,但我们也可以将精力集中在其他元素上。

Please find following static example for the same, it's very simple code (example), so I am not generating jsfiddle. 同样,请找到以下静态示例,这是非常简单的代码(示例),因此我没有生成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>

There is no onClose event for select element. select元素没有onClose事件。 You can try the $.focusout event handler with something like this: 您可以使用以下方法尝试$.focusout事件处理程序:

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

This way, when you click outside of the box, the focusout event will be fired, and it will trigger another element's focus event. 这样,当您单击框外,该focusout的事件将被解雇,这将触发另一个元素的focus事件。

Fiddle available here . 小提琴在这里提供

 $(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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM