Помогите разобраться с Bubbling
Помогите разобраться в следующей проблеме
У меня форма входа для пользователя всплывающая, необходимо чтобы при нажатии в любое место экрана, эта форма исчезала. <body onclick="close_log()"> <span class="login" onclick="open_log ();"> <script> function open_log() { document.getElementById('login_box').style.display ='block' return false; } function close_log () { document.getElementById('login_box').style.display ='none' } </script> Данный код не работает изза всплывающего эфекта Dom, подскажите как сделать чтобы при первом клике форма сразу не закрывалась? |
В вызов добавьте onclick="open_log (event);"
а в функцию - остановку всплытия события:
function open_log(event) {
document.getElementById('login_box').style.display ='block';
if (event) {
event.stopPropagation()
} else {
window.event.cancelBubble = true
}
return false;
}
|
Форма конечно сразу не закрывается, но появилась другая проблема) Когда я пытаюсь поставить курсор в input то форма закрывается
Такой код сейчас function open_log(event) { document.getElementById('login_box').style.display ='block'; if (event) { event.stopPropagation() } else { window.event.cancelBubble = true } return false; } function close() { document.getElementById('login_box').style.display ='none'; } <body onclick="close()"> <span class="login" onclick="open_log (event);"> |
Ну допишите к этому 'login_box' функцию onclick, которая так же останавливает всплытие.
|
Дописал функцию к 'login_box' которая останавливает всплытие, но данная конструкция работает только в мозиле:( А как сделать для всех браузеров? В javascript пока полный ноль просто:(
|
попробуй добавить отмену событий по умолчанию
function open_log( event ) {
document.getElementById('login_box').style.display ='block';
event = event || window.event;
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
return false;
}
|
http://jsfiddle.net/fPEUP/2/
<style>
body {
color: gray;
}
#a {
color: red;
}
#login_box {
border: 2px red dashed;
color: black;
}
</style>
<body>
скройся!
<div id="a" class="login">появись!</div>
<div id="login_box">скрывалка появлялка</div>
</body>
<script>
var b = document.getElementById("login_box");
document.body.onclick = function(a) {
b.style.display = ~(a ? a.target : event.srcElement).className.indexOf("login") ? "block" : "none"
}
</script>
|
К сожалению изменений никаких:( Работает только в мозиле
|
подточи скрипт...
|
Вот так, по-моему, работает везде:
event = event || window.event; event.cancelBubble = true |
| Часовой пояс GMT +3, время: 02:47. |