有没有办法确定一个 <select>下拉菜单打开? [英] Is there a way to determine if a <select> dropdown menu is open?

问题描述

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

I'm looking for a way to determine if/when a <select> element's menu is open. I don't need to force it to open or close, just figure out if it's open or closed at a given time.

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

I can listen to events for focus/blur, mouseup/mousedown, etc., but I don't think I can reliably figure out the state of the menu from those events. For example, mousedown followed by mouseup could mean the user clicked and dragged to a selection and released (in which case the menu is now closed) or clicked and released to open the menu (in which case the menu is open). It also seems likely that the specific behavior of dropdown menus is browser-dependent.

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

.

I know I could do this if I roll my own dropdown menu, but I prefer to use <select>.

是否有可靠的方法来确定下拉菜单是否打开?或者这是 Javascript 无法知道的东西?

Is there a reliable way to find out if a dropdown menu is open? Or is this something that Javascript can't know?

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

Conclusion: There doesn't seem to be any guaranteed way to determine if a select menu is open, either by asking the object or by listening to the events it fires.

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

For my own use I'm just keeping track of whether the select has focus using onfocus and onblur. I'm assuming there's no way for the menu to be open without having focus, and that seems to hold true in all the browsers I've tested. It doesn't actually tell me when the menu is open, but it tells me when it can't be open, which is good enough for my purposes.

推荐答案

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

You can play with mouseenter event in select's option child elements as you can only enter in them if select menu is open, or also with the click event on the select element, usually thrown when you open it.

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

To test in a precise moment if its open or not I think is not possible.

这篇关于有没有办法确定一个 <select>下拉菜单打开?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！