有没有办法确定 <select> 下拉菜单是否打开？答案

【问题标题】：Is there a way to determine if a <select> dropdown menu is open?有没有办法确定 <select> 下拉菜单是否打开？
【发布时间】：2011-02-12 03:52:05
【问题描述】：

我正在寻找一种方法来确定<select> 元素的菜单是否/何时打开。我不需要强制它打开或关闭，只需确定它在给定时间是打开还是关闭。

我可以监听焦点/模糊、mouseup/mousedown 等事件，但我认为我不能可靠地从这些事件中找出菜单的状态。例如，mousedown 后跟 mouseup 可能意味着用户单击并拖动到选择并释放（在这种情况下菜单现在关闭）或单击并释放以打开菜单（在这种情况下菜单打开）。下拉菜单的特定行为似乎也取决于浏览器。

如果我滚动自己的下拉菜单，我知道我可以做到这一点，但我更喜欢使用<select>。

是否有可靠的方法来确定下拉菜单是否打开？还是这是 Javascript 无法知道的？

结论：似乎没有任何保证方法可以确定选择菜单是否打开，无论是通过询问对象还是通过侦听它触发的事件。

为了我自己的使用，我只是使用 onfocus 和 onblur 来跟踪选择是否具有焦点。我假设没有焦点就无法打开菜单，这在我测试过的所有浏览器中似乎都是正确的。它实际上并没有告诉我菜单何时打开，但它会告诉我它何时无法打开，这对我的目的来说已经足够了。

【问题讨论】：

标签： javascript dom menu popup drop-down-menu

【解决方案1】：

您可以在 select 的 option 子元素中使用 mouseenter 事件，因为您只能在选择菜单打开时输入它们，或者也可以在 select 元素上使用 click 事件，通常在您打开它。

在精确的时刻测试它是否打开我认为是不可能的。

【讨论】：

仅供参考 - IE 的更高版本会打开一个不会触发通常事件的自定义选择列表菜单。本质上，当您打开一个选择列表时，您的鼠标现在悬停在与 DOM 无关的东西上

【解决方案2】：

选择元素在 Internet Explorer 中是出了名的棘手。我认为没有任何方法可以可靠地确定一个是打开还是关闭。

【讨论】：

【解决方案3】：

我可以查看选择是否打开，然后在用户选择新选项或完全模糊选择时关闭。但是，如果您单击相同的选项，或者只单击一次选择（关闭它但不模糊它），它仍然显示“向下”。致力于更完整的解决方案。所以，期待这个答案有编辑......

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
  var selected
$( document ).ready(


 function()
 { 
  $( '#test' )
      .mousedown( function(){ console.log( 'down' ); selected = $( this ).val() } )
      .blur( function(){ console.log( 'out' ) } )
      .change( function(){ console.log( 'out' ) } )
      .mouseleave( function(){ console.log( 'out' ) } )
      .mouseup( function(){ 
         if( $( this ).val() == selected ) 
           console.log( 'out' )
    }
   )
 } // function

) // ready
</script>

<select id="test">
 <option>1</option>
 <option>2</option>
</select>

编辑：添加鼠标移出

Edit2：添加了 mouseup - 现在可以使用了！

【讨论】：

我认为这现在可行。它有时会多次“退出”。我认为我没有涵盖的唯一场景是，如果您打开选择，选择选定的选项，并且不要移动鼠标。更多精彩即将到来！
我不确定这应该做什么。当我在菜单上单击并释放时，它会记录“down”和“out”。但菜单仍然打开。看起来您只是在听我提到的事件，但出于某种原因使用 jquery。我错过了什么吗？
只使用 jquery 因为我比直接 js 更了解它。对我来说，当我点击菜单时，它会记录“down”，当我选择某些东西时，它会记录“out”。这些可以用作变量或函数调用或其他任何东西，我只是将其记录下来进行测试。你用的是什么浏览器？
火狐。每次光标离开菜单时都会触发 mouseleave 事件，无论菜单是否关闭。当鼠标不在菜单上时，无法判断用户是否关闭了菜单。还有其他方法可以激活菜单，例如按键。
Gotchya.. 是的，我不知道我在这里展示了什么。希望它可以帮助您入门。它在某些浏览器中确实有效，所以也许这是一个有用的开始:)

【解决方案4】：

更完整的解决方案是：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
var selected,selected2
$( document ).ready(


 function()
 { 
  $( 'select[id$="test"]' )
      .mousedown( function(){ 
        console.log( 'predown' );
        if( $( this ).val() != selected ) {
          console.log( 'down' ); 
          selected = $( this ).val();
          selected2=null;} 
        else  
          selected=null;} )
      .blur( function(){ if (selected2==selected) {
        console.log( 'outb' );
        selected=null;
        selected2=null;} } )
      .mouseup( function(){ console.log( 'preoutu' );
         if( $( this ).val() != selected || $( this ).val() == selected2 ) {
            console.log( 'outu' );
            selected=null;
            selected2=null;
         }
         else
           selected2=$( this ).val();   
    }
   )
 } // function

) // ready
</script>


<select id="1test">
 <option>1</option>
 <option>2</option>
</select>
<select id="2test">
 <option>1</option>
 <option>2</option>
</select>

【讨论】：