Опытная лучшая практика для “щелчка где-нибудь для закрытия”?
Я оказываюсь очень часто в ситуации, что я открываю элемент в веб-странице - например, выпадающее меню - что я хочу закрыться, если пользователь нажимает где-нибудь на странице кроме самого элемента.
Для хранения вещей простыми я главным образом написал код сам вместо того, чтобы использовать некоторый выпадающий класс меню.
Однако мне никогда не удавалось создать реализацию из этого, которое абсолютно удовлетворяло: Обработка событий и пузырение работали бы по-другому в различных браузерах, будет потребность в противных обходных решениях, в некоторых ситуациях, нажимающих выпадающую кнопку, начал бы закрывать его в тот же момент, и так далее.
Существует ли Прототип базирующаяся, авторитетная, лучшая практика, чтобы сделать это? Что-то, что работает через браузеры - IE6, являющийся плюс, но не требование?
Просто это:
- нажмите на кнопку - элемент открывается (например, абсолютно расположенное выпадающее меню).
- нажмите в элементе - элемент остается открытым.
- нажмите на кнопку, которая открыла элемент - элемент остается открытым.
- нажмите где-либо еще на странице - завершения элемента.
Я нуждаюсь в помощи с частью обработки событий только, отображение меню полностью вторично.
4 ответа
Event.observe(document, 'click', function (event) {
switch (event.element().id) {
case 'example_id':
// do different stuff depending on element clicked
// ofc u don't need to pass id, u can simply throw an element itself
break;
default:
// do close action
break;
}
// also check Event.findElement();
});
Вы также можете добавить определенные классы к элементам, которые не должны запускать действие закрытия, и проверить их внутри
if (!event.element().hasClassName('dont_close'))
Element.remove(selectDOMElement);
AFAIK, вам нужно сделать невидимый div размером с окно, поместить его за текущий элемент и добавить к нему событие щелчка.
Просто подумайте вслух, но вы могли бы использовать событие размытия в раскрывающемся списке, чтобы скрыть его ( размытие срабатывает, когда элемент теряет фокус) или другая идея может заключаться в том, что раскрывающийся список открывается, прикрепив событие щелчка к объекту документа, который скрывает раскрывающийся список. События распространяются через свои контейнеры, поэтому в конечном итоге они должны попасть в объект документа. Вам может потребоваться вызвать preventPropegation для события при нажатии раскрывающегося списка, чтобы оно не попало в обработчик, прикрепленный к документу.
, возможно, вы могли бы вычислить позицию (X, Y) для clickevent и сравните это с cumulativeOffset (cumulativeScrollOffset) + [el.width | el.height] желаемого контейнера.
Event.observe(window, 'click', function(e) {
var el = $('el')
if( el.cumulativeOffset[0] < e.Event.pointerX(e) ... )
});
<div id="el" style="position:absolute;width:100px;height:100px;background-color:#00F;top:100px;left:300px;">
</div>