Спрятать блок по щелчку в другое место
Есть всплывающая контекстная менюшка, которая высвечивается, если кликнуть по элементу. Как сделать, чтобы она пряталась при клике в любое другое место, кроме как не по ней? Как это обычно делают?
У меня есть два варианта: 1) Поставить всему документу событие onclick, а самой менюшке убрать его. 2) одновременно с менюшкой показывать прозрачный div на весь документ, с меньшим, чем у неё z-индексом, с событием onclick, которое будет прятать и этот див, и меню. Есть ещё какие-нибудь способы? |
<button class="but">click</button>
<div id="div" style="display: none; background: lightgreen">
<button>button</button>
text
</div>
<script>
window.onload = function () {
function sh(elem) {
if (elem.style.display != 'block') {
elem.style.display = 'block';
} else {
elem.style.display = 'none';
}
}
var div = document.getElementById('div');
document.body.onclick = function (e) {
e = e || event;
var target = e.target || e.srcElement;
if (target.className == 'but') {
sh(div);
} else {
while (target && target != div) {
target = target.parentNode;
}
if (target != div) {
div.style.display = 'none';
}
}
}
}
</script>
|
То есть мой первый вариант,только куда больше продуманный. Спасибо.
|
Не совсем так, в первом случае был клик по "фону", а здесь идёт отсечение клика для всех элементов меню, включая само меню.
Если не требуются дополнительные элементы, которые должны участвовать в процессе (быть кликабельными и т.п.) при открытом меню, то первый вариант, на мой взгляд, лучше, так как требует меньше вычислений. |
Сейчас очень долго ресчленял ваш код, увидел и ту тонкость, о которой вы говорите. Поскольку мне нужно было только закрытие дива, и значительную часть листа у меня занимает просто фон(не входит в body), у меня осталось это:
document.onclick = function (e) {
var div = document.getElementById('menu');
e = e || event;
var target = e.target || e.srcElement;
if (target.className != 'but') {
while (target && target != div) {
target = target.parentNode;
}
if (target != div) {
div.style.display = 'none';
}
}
}
Спасибо большое. |
| Часовой пояс GMT +3, время: 05:36. |