Существует ли способ определить, открыто ли выпадающее меню <select>?
Я ищу способ определить если/когда a <select> меню элемента открыто. Я не должен вынуждать это открыться или закрыться, просто выяснить, открыто ли это или закрыто в установленный срок.
Я могу слушать события для фокуса/размытости, mouseup/mousedown, и т.д., но я не думаю, что могу надежно выяснить состояние меню от тех событий. Например, mousedown сопровождаемый mouseup мог значить пользователя, перетащенного для выбора и выпущенного (в этом случае, меню теперь закрывается), или нажал и выпустил для открытия меню (в этом случае, меню открыто). Также кажется вероятным, что определенное поведение выпадающих меню зависимо от браузера.
Я знаю, что мог сделать это, если я прокручиваю свое собственное выпадающее меню, но я предпочитаю использовать <select>.
Существует ли надежный способ узнать, открыто ли выпадающее меню? Или это - что-то, что не может знать JavaScript?
Заключение: кажется, нет никакого гарантируемого способа определить, открыто ли избранное меню, или путем выяснения у объекта, или путем слушания событий это стреляет.
Для моего собственного использования я просто отслеживаю то, фокусируется ли выбор с помощью onfocus и onblur. Я предполагаю, что нет никакого пути к меню, чтобы быть открытым без фокусирования, и это, кажется, сохраняется во всех браузерах, которые я протестировал. Это на самом деле не говорит мне, когда меню открыто, но это говорит мне, когда это не может быть открыто, который достаточно хорош в моих целях.
3 ответа
Вы можете играть с событием mouseenter в дочерних элементах select option , так как вы можете вводить их только при выборе открыто меню, или также с событием click в элементе select , которое обычно вызывается при его открытии.
Я думаю, что невозможно проверить в конкретный момент, открыто оно или нет.
Выбор элементов в Internet Explorer, как известно, является сложной задачей. Я не думаю, что есть какой-либо способ надежно определить, открыт он или закрыт.
Я могу видеть, открыт ли выбор, а затем, когда он закрывается, выбирает ли пользователь новую опцию или полностью размывает выбор. Однако, если вы нажмете на тот же параметр или просто щелкните один раз за пределами выделенного (закрывая его, но не размывая), он все равно будет отображаться «вниз». Работаем над более полным решением. Итак, ожидайте, что в этом ответе будут правки ...
<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>
Edit: добавлено mouseout
Edit2: добавлено mouseup - теперь работает!