Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > Отследить клик вне слоя

Автор: boombick 9.10.2006, 14:16

Вообщем, проблема в следующем:
По щелчку мыши показывается div, который до щелчка был скрыт (display:none)
Хотелось бы, по щелчку мыши _вне_ слоя скрывать его...
В какую сторону копать?

Автор: Avb 9.10.2006, 18:02

Копать в сторону DOM Events.
Используешь тот факт что событие, где бы оно не возникло распространяется по дереву DOM.
В момент показа дива навешиваешь событие click на document.body. На каком бы элементе не кликнул пользователь, событие дойдет до боди.
В обработчике события click для body можно узнать какой элемент инициировал событие. Если этот элемент не является самим дивом, или его child-ом, то прячем див, в противном случае - нет.

Я пользую библиотеку prototype.js. В ней:
Event.observe(document.body, 'click', обработчик, false); - навешиваем обработчик события
В обработчике:
Event.element(event) - элемент, вызвавший событие. (event - объект события).
Если Event.element(event) - не твой див, то проверяешь не является ли он его child-ом, например,
используя Element.childOf
Event.stop(event) - остановка дальнейшего распространения события.
Event.stopObserving(document.body, 'click', обработчик, false); - удаляем обработчик события

Автор: szz 15.6.2007, 04:02

Avb, а ты бы мог дать пример? Я тоже использую прототип.js (преимущественно ради аякса и jsona),
но, хоть твои объяснения описывают общий процесс довольно ясно, все же хотелось бы наглядности.

Все ясно с Event.observe и Event.stopObserving

А вот как быть с Event.element(event) не совсем ясно. Это нужно проверять в обработчике, а он должен быть методом элемента или же глобальной функцмей (под window)?
И как же писать? Я понял так (уверен что неправильно smile

) :

Код


<div id=наш_див>куку</div>
<script>
// пишем обработчик (глобальный, да?..)
обработчик = function(){
  // вот что тут с этим Event.element(event) делать? Что, прям так писать
  if(
       Event.element(event)!=document.getElementById('наш_див') 
        &&
       !Event.element(event).childOf('наш_див')
     )
       document.getElementById('наш_див').style.display='none';
  
}
// вешаем обработчик:
Event.observe(document.body, 'click', обработчик, false);
</script>

В общем, я попытался сделать все по твоему объяснению, и судя по тому, что написал я неправильно - тема не раскрыта ))) Или я туплю )))

Автор: szz 16.6.2007, 20:55

Ладно, я нашел, если кому еще понадобится - вот http://www.prototypejs.org/api/event/element

Автор: Avb 18.6.2007, 10:45

szz, по твоему примеру:
1. обработчик должен получать первым аргументом объект event, поэтому:

Код


обработчик = function(event){

2. document.getElementById равносильно $ (зачем писать больше? smile

)
3. зачем в if-е делать два отрицания. По-моему понятнее и удобнее так:

Код


  if(
       Event.element(event)==$('наш_див') 
        ||
       Event.element(event).childOf('наш_див')
     )

4. По причине п.2:

Код


document.getElementById('наш_див').style.display='none';

меняем на

Код


$('наш_див').hide();

5. Для того, чтобы обработчик получал первым аргументом объект события, необходимо при навешивании обработчика использовать bindAsEventListener()
Вот так:

Код


Event.observe(document.body, 'click', обработчик.bindAsEventListener(), false);

Обработчик события может быть глобальной функцией, может быть членом класса.
Для привязки конкретного объекта к функции используются bind и bindAsEventListener. Второй помимо объекта привязывает еще и событие.
Сейчас эти функции могут принимать более одного параметра. Т.о. в функцию можно передавать дополнительные параметры, например, в обработчик события можно передать сразу элемент на котором это событие произошло.
Если хочешь полезный пример, то выложи свой код: верстку и js.
А я покажу, как бы я написал сейчас то, что тебе нужно. (Полгода назад я писал бы по-другому smile

)

Добавлено через 5 минут и 47 секунд
Ну и кроме этого надеюсь ты знаешь, что для того чтобы код был совместим с XHTML значения атрибутов нужно брать в кавычки, а скрипты помещать в блок комментария. Вот так:

Код


<script type="text/javascript">
// <![CDATA[
alert(1);
// ]]>
</script>

а лучше выносить в отдельный файл и подключать так:

Код


<script src="/javascripts/prototype.js" type="text/javascript"></script>

без language = "javascript" и еще чего бы то ни было.

Автор: SamDark 18.6.2007, 12:52

Мдя... народ, вы чего?

Код


Event.observe(element, 'blur', обработчик.bindAsEventListener(element), false);

Автор: Avb 18.6.2007, 14:35

SamDark, интересно. А можно пример?

Автор: SamDark 18.6.2007, 16:28

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>er</title>
    <link rel="stylesheet" href="dropbox.css" type="text/css">
    <script language="javascript" type="text/javascript" src="prototype.js"></script>
    <script language="javascript" type="text/javascript">
        function show(){
            this.show();
            this.focus();
        }
        
        function hide(){
            alert("!");
            this.hide();
        }
        
        function onLoad(){
            var opener = document.getElementById('opener');
            var box = document.createElement('DIV');
            Element.extend(box);
            box.addClassName("box");
            box.hide();
            opener.parentNode.insertBefore(box, opener.nextSibling);
                                
            Event.observe(opener, "click", show.bindAsEventListener(box), false);    
            Event.observe(box, "blur", hide.bindAsEventListener(box), false);
        }
        
        Event.observe(window, "load", onLoad);
    </script>
    <style type="text/css">
        .box {
            width: 100px; height: 100px;
            background: #eee;
        }
    </style>
  </head>
  <body>
        <a id="opener" href="#">Show box</a>        
  </body>
</html>

Автор: Avb 18.6.2007, 17:05

SamDark, у меня этот код работает в ИЕ7
и в ИЕ6 после замены

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

на

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

В ФФ2.0.0.4, Опера 9.21 и Safari - не работает.
Да и возможно, не всегда удобно перемещать фокус на открываемый див.

Автор: SamDark 18.6.2007, 20:41

Avb,
Ну, тогда на document.body вешать и фильтровать выбранный div.

Автор: SamDark 27.6.2007, 17:00

Avb,
К сожалению, не срабатывает по щелчку на самом body если нет никаких элементов. Если щёлкать на тексте, например, работает.

Чёрт, туплю... Всё верно. Так и должно быть. Спасибо за решение.