Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.08.2011, 11:12
Новичок на форуме
Отправить личное сообщение для HawkOFF Посмотреть профиль Найти все сообщения от HawkOFF
 
Регистрация: 05.08.2011
Сообщений: 4

Помогите разобраться с 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, подскажите как сделать чтобы при первом клике форма сразу не закрывалась?
Ответить с цитированием
  #2 (permalink)  
Старый 05.08.2011, 16:28
Аспирант
Отправить личное сообщение для kostr Посмотреть профиль Найти все сообщения от kostr
 
Регистрация: 12.09.2010
Сообщений: 98

В вызов добавьте 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;
}
Ответить с цитированием
  #3 (permalink)  
Старый 05.08.2011, 21:45
Новичок на форуме
Отправить личное сообщение для HawkOFF Посмотреть профиль Найти все сообщения от HawkOFF
 
Регистрация: 05.08.2011
Сообщений: 4

Форма конечно сразу не закрывается, но появилась другая проблема) Когда я пытаюсь поставить курсор в 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);">
Ответить с цитированием
  #4 (permalink)  
Старый 05.08.2011, 22:50
Аспирант
Отправить личное сообщение для kostr Посмотреть профиль Найти все сообщения от kostr
 
Регистрация: 12.09.2010
Сообщений: 98

Ну допишите к этому 'login_box' функцию onclick, которая так же останавливает всплытие.
Ответить с цитированием
  #5 (permalink)  
Старый 08.08.2011, 09:46
Новичок на форуме
Отправить личное сообщение для HawkOFF Посмотреть профиль Найти все сообщения от HawkOFF
 
Регистрация: 05.08.2011
Сообщений: 4

Дописал функцию к 'login_box' которая останавливает всплытие, но данная конструкция работает только в мозиле А как сделать для всех браузеров? В javascript пока полный ноль просто
Ответить с цитированием
  #6 (permalink)  
Старый 09.08.2011, 06:47
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

попробуй добавить отмену событий по умолчанию
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;
}

Последний раз редактировалось devote, 09.08.2011 в 06:52.
Ответить с цитированием
  #7 (permalink)  
Старый 09.08.2011, 09:22
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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>
Ответить с цитированием
  #8 (permalink)  
Старый 09.08.2011, 09:44
Новичок на форуме
Отправить личное сообщение для HawkOFF Посмотреть профиль Найти все сообщения от HawkOFF
 
Регистрация: 05.08.2011
Сообщений: 4

К сожалению изменений никаких Работает только в мозиле
Ответить с цитированием
  #9 (permalink)  
Старый 09.08.2011, 10:59
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

подточи скрипт...
Ответить с цитированием
  #10 (permalink)  
Старый 09.08.2011, 21:38
Аспирант
Отправить личное сообщение для kostr Посмотреть профиль Найти все сообщения от kostr
 
Регистрация: 12.09.2010
Сообщений: 98

Вот так, по-моему, работает везде:
event = event || window.event;
event.cancelBubble = true
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подсчёт дней до конца акции - помогите разобраться со скриптом Chataine Общие вопросы Javascript 0 24.07.2011 14:48
Прелоадер (помогите разобраться) xsfd AJAX и COMET 6 16.09.2010 02:30
Помогите пожалуйста разобраться Kupu4 Ваши сайты и скрипты 0 21.01.2010 10:44
Помогите разобраться с галереей IMAGIN yana_studio Общие вопросы Javascript 4 12.12.2009 17:24
Помогите разобраться с задачей (поиск строки) Absinthe Ваши сайты и скрипты 6 07.12.2009 09:17