有没有办法确定 是否是下拉菜单已打开？

Question

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

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

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

有没有可靠的方法来确定下拉菜单是否打开？或者这是 Javascript 无法知道的事情？

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

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

Answer 1

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

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

Answer 2

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

Answer 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>

编辑：添加了 mouseout

编辑2：添加了 mouseup - 现在可以使用！

Answer 4

这是您问题的完整答案。是的，它有点长，但它在所有场景中都具有魅力。

当用户在我的实验中快速选择一个选项时，上面使用 onClick 的答案不起作用，所以我为什么不给出完整的答案

function App() {
const [isOpen, setIsOpen] = useState(false);
  
  const componentRef = useRef(null);
  
    const selectClickHandle = (event) => {
  
      if (componentRef.current) {
        const rect = componentRef.current.getBoundingClientRect();
        const { clientX, clientY } = event;
  
        const isInComponent =
          clientX >= rect.left &&
          clientX <= rect.right &&
          clientY >= rect.top &&
          clientY <= rect.bottom;
  
        console.log(isInComponent);
        if (isInComponent == false) {
          setIsOpen(false);
        }
      }
    }
  
    const selectBlurHandle = () => {
      console.log("blur");
      setIsOpen(false);
    }
  
    const selectkeyHandle = (event) => {
      console.log("key");
      if (event.key === 'Enter' || event.keyCode === 13 || event.key === ' ' || event.keyCode === 32) {
        setIsOpen(true);
      }
    };
  
    const selectMousePress = (event) => {
      console.log("mouse");
      setIsOpen(!isOpen);
    }
    return (
      <div className="App">    
<h1 style={{ paddingTop: "200px" }}>currently closed {isOpen ? "true" : "false"}</h1>
      <div id="outer-container"
      >
        <select id="fruit" name="fruit"
          ref={componentRef}
          onMouseDown={selectMousePress}
          onClick={selectClickHandle}
          onBlur={selectBlurHandle}
          onKeyDown={selectkeyHandle}
        >
          <option value="apple" >Apple</option>
          <option value="banana">Banana</option>
          <option value="grape">Grape</option>
        </select>
      </div>
  );

}
export default App;

我还在媒体上写了一篇关于它的文章，如果需要更多说明，请访问。

https://medium .com/@ijlal.tanveer294/how-to-know-if-a-select-dropdown-is-open-555a304e7dda

Answer 5

更完整的解决方案是：

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