Броский jQuery mouseleave поведение
У меня есть подобный меню выпадающий контейнер, который скрывается через привязку "mouseleave" события.
<div id="container">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
Проблема, которую я имею, состоит в том, когда дочерние элементы моего контейнера содержат ИЗБРАННЫЙ объект, где ОПЦИИ ВЫБОРА физически расширяются вне границ контейнера. Следовательно, парение над ОПЦИЯМИ за пределами границ инициировало "mouseleave" событие, чтобы запустить и закрыть мое выпадающее. ВЫБОР является ребенком контейнера, так в этом случае я ожидал бы, что mouseleave событие распознает это.
3 ответа
Возможно, когда раскрывающийся список расширяется, вы можете установить флаг. Очистить флаг, когда выбран элемент. Когда возникает MouseLeave, не скрывайте меню, если флаг не понятен.
Я всегда нервничаю по поводу взлома событий UI к этой степени, хотя, поскольку, вероятно, в конечном итоге вы покинете немного браузера где-то в совершенно непригодном состоянии.
Большинство рендеров (все кроме Gecko, я думаю) реализуют открытые меню и их параметры в отдельном «окне», а не в качестве элементов на странице. Страница, то не обязательно осознавая взаимодействие пользователя с открытым меню. Это очень маловероятно, что вы сможете добиться желаемого эффекта во всех основных браузерах ...
Редактировать: ... но, возможно, так. Это работает для меня в Safari и Firefox. Я не могу проверить в IE прямо сейчас, но придайте ему выстрел:
var timer;
$('#container').mouseleave(function(e) {
if($(e.target).parents('#container').length) {
return;
}
timer = setTimeout(function() {
$('#container select').blur();
}, 50);
}).mouseenter(function(e) {
if(timer) {
clearTimeout(timer);
}
});
Отредактируйте 2: На самом деле сафари не огонь MouseLeave (или . ) вообще, когда «Окно» открыто.
Спасибо век! Я нашел еще один ответ на эту проблему прошлой ночью, которая очень похожа на то, что вы размещены.
.bind("mouseleave", function(e) { // ANSWER HERE!!!
if (!e.fromElement.length) {
_state.filterTrigger.data("open", false);
setTimeout(function() { _toggleFilter(_state.filterTrigger); }, 2000);
}
});
Объект e.FromeLement дает счет объектов опционов в выборе. Этот объект не определен для других тегов HTML. Я не пробовал ваше решение, но это работает для меня.