мне кажется, вопрос довольно распространённый, только я никак не найду похожую тему. если была - покажите, пожалуйста.
мы пишем имитацию выпадающих списков, и нам нужно скрывать список (див) при клике мимо него. есть функция hide_all_selects(), но на какое событие её повесить? что бы вы посоветовали?

http://forum.vingrad.ru/index.php?showtopic=115646

о! спасибо. сама не нашла.

Можно проще - воспользоваться свойством cancelBubble объекта event.
1) На body повесить обработчик, скрывающий выпадушку по клику
2) На саму выпадушку повесить обработчик, который запретит событию распространятся вверх по дереву DOM

Но в таком случае нужно учесть, что обработчик, скрывающий выпадушку, будет вызываться при каждом клике в пределах документа. Если в нем кроме divElement.style.display = 'none' ничего нет, то тогда все ОК. А если есть дополнительные действия, то нужно смотреть по ситуации.


Burrr, не так ли?

Avb, совершенно верно, Но я бы не сказал, что в этом есть какие-то затруднения. Обычно я пишу обработчик так:

Вписываем туда функций, сколько влезет...

Burrr, я имел в виду не невозможность выполнять несколько функций, а возможные затупления, если вдруг при каждом скрытии дивов необходимо выполнять какой-то "тяжелый" код. 
И то это чисто теоретически, т. к. этот тяжелый код можно не выполнять, если див невидимый.
Просто katka, должна это учесть и при необходимости добавить дополнительные проверки.

  куда это писать? там, где обрабатываем клик на выпадушку? мм.. что такое event?  

Это сообщение отредактировал(а) Burrr - 18.10.2006, 16:59

мне во все функции с обработкой кликов пихать евент в скобочки? блин. простите, ради бога, но я ничего не поняла опять ((
вот, давайте с примером..

в моём идиллическом мире нет никаких евентов, к сожалению  

Да, а в чем проблема? 
Это нужно для мозиллы, ИЕ работает на window.event.


Это сообщение отредактировал(а) Burrr - 18.10.2006, 17:21

Burrr, спасибо!! рработает!! красота!

Ну, и я тут примерчик набросал:


Добавлено @ 18:22 
katka, советую почитать раздел Events на http://www.quirksmode.org/js/contents.html для лучшего понимания обработки событий.

Это сообщение отредактировал(а) Avb - 19.10.2006, 10:58

Есть более изысканное решение для "отлова" событий вне объекта.
Заключается он в использовании методов setCapture()/releaseCapture().
Например:



После нажатия на кнопку слой будет принимать событие onClick из любой области документа.
Фича поддерживается IE. Чтобы расширить на Mozilla/Opera, можно определить прототипы для элементов документа.
Например, следующим образом:



Вуаля.

Строчка evt = evt || window.event; для такого примера не обязательна, и cancelBubble - это всё же не комильфо для тех браузеров, что знают и умеют stopPropagation. 

Zeroglif, проверял работу cancelBubble в ИЕ 6, Opera 7.5+, NN 7.1+, Mozilla 1.7, FF 1,5 - везде работает. По идее cancelBubble изначально поддерживалась только ИЕ, но если сейчас оно работает и во всех остальных бпаузерах, то зачем плодить методы ;)

Burrr, 

Это св-во - Deprecated!

Nicholas_S, 

А что "изысканного" может быть в куче дополнительного кода?

Avb, спасибо, почитаю обязательно. а код у меня в ие ничего не показывает (

Nicholas_S, гигантский код какой )) вуаля, действительно )


Zeroglif, а как комильфо писать? stopPropagation вместо cancelBubble? или как?

katka, код нужно сохранить в utf-8. Ну или поменять кодировку на windows-1251.

Zeroglif, ага, ясно. спасибо.

Avb, да теперь всё видно. спасибо за пример

Это сообщение отредактировал(а) katka - 19.10.2006, 13:21

 - вот так.

А если надо еще и предотвратить выполнение default-ного действия (например, отменить переход по ссылке или сабмит формы), то так 

кстати, да! предотвратить-то тоже надо. как-то я не подумала, спасибо.

AKS, katka, изысканность определяется не только размером, но и реализацией.
Методы setCapture/releaseCapture было созданы для подобного рода ситуаций. Если требуется отловить клик вне элемента только в IE, дополнительный код не нужен. К тому же, он не такой и большой, как может показаться:

Nicholas_S, да нет, мы кроссбраузерно пишем.
а код прекрасен. хотя я его и не понимаю, начиная с самой первой строчки  
только я уже по-другому сделала, как мне товарищи насоветовали. я почитаю про setCapture/releaseCapture обязательно, только напрягает вот этот сопроводительный код для не-ие.

Nicholas_S, если не трудно, ради интереса, посмотри мой пример выше из поста 
и реализуй то же самое с помощью setCapture/releaseCapture

Просто мне кажется, что это метод не определяет клик вне слоя, а перехватывает все события как внутри слоя, так и вне его. Как узнать, что кликнули именно вне слоя?

Это сообщение отредактировал(а) Avb - 19.10.2006, 15:19

katka, (в стиле кота Матроскина) если хоочешь - объяснюу.  

Avb, ты прав, метод мерехватывает события как вне слоя, так и внутри его.
Чтобы определить, на каком элементе кликнули, достаточно обратиться к параметру event.srcElement (для IE) или event.originalTarget (FF).
Можно посмотреть след. код, покликав на странице:


Это сообщение отредактировал(а) Nicholas_S - 19.10.2006, 16:14

Nicholas_S, 

Да бог с ней, с изысканостью! Тут есть еще кое-что - ведь нужно эмулировать и возможность использования булева параметра, который есть в оригинальном методе. Я вот думал, думал - ничего не придумал. А Вы знаете, как это сделать? 

Nicholas_S, ну ладно. первая строчка — это просто проверка на браузер, так ведь? а вот чего там дальше..
ну, давай. объясняй, матроскин ) что такое, во-первых, этот HTMLElement и его prototype? или давай на обучающую тему по е-мейл пообщаемся, что ли? а то развели тут учебный класс   

AKS, параметр подразумевает, что все дочерние объекты будут включать свои собственные обработчики событий. Теоретически, можно реализовать. Если возникнет необходимость - дай знать, попробуем что-нибудь придумать.


katka, если есть желание - давай электропочтой. Какой ты там говоришь у тебя ящик?  

katka, нет, почтой - на другие темы общайтесь, а про Javascript - здесь 

Nicholas_S, 

Не-е-е, я повозился и бросил (ну их, эти эмуляции)! Там кстати с параметром false имеется ввиду, что элемент не будет перехватывать события детишек, и это, как раз о-о-очень не легко, а может даже не возможно!
Я сделал по-простому - четыре функции и полностью решается проблема автора темы (все кроссбраузерно и места занимает столько, сколько сама эмуляция - чего еще желать?):

Подобные эмуляции стоит писать тогда, когда, скажем, они входят в какой-нибудь framework, библиотеку для пользователей, которым нужен идентичный набор методов и свойств для всех браузеров. Но это отнюдь не панацея - если можно реализовать все проще, то почему бы и нет. Я просто предложил один из вариантов.
А дописать данный код для "детишек", AKS, в пару строк не получится, я с тобой согласен.

Господа!
Цель должна оправдывать средства. Не знаю насколько сложное приложение пишет katka, но есть предположение, что кода, который написал Avb на первой странице более чем достаточно. Я к нему только бы добавил проверку, чтобы ф-ия closeDiv вызывалась только тогда, когда этот див виден, и всё!
stopPropargation & cancelBubble будет вполне достаточно.
Возможно тяжеловесная ф-ия скрытия будет запускаться только в случае надобности. Проблема решена, и незачем писать лишние километры кода!

Burrr, 

А я бы добавил возможность использовать методы addEventListener/attachEvent...

AKS

Зачем, что это даст в данном конкретном случае? На какой элеиент ты собираешься вешать событие этими методами?

Nicholas_S, велели тут разговаривать )) так что такое HTMLElement?

Burrr, Вы знаете, на мой взгляд удобней использовать методы addEventListener/attachEvent вместо такого:

"Почему?" - спросите Вы. Потому, что я напишу, затем кто-то допишет, а потом кто-то еще что-то добавит (это те, кто будет заниматься поддержкой странички в дальнейшем), и никому не придется лезть в чужой код, искать document.onclick, чтобы туда вставить что-то свое. Такая вот своеобразная и всеми любимая независимость получается...
Я вчера кое-что писал - сейчас оформлю для наглядности и покажу...

katka, если научным языком, то HTMLElement это производный класс от Element, т.е. класс-предок. Ими являются элементы страницы как то: DIV, A, TABLE и проч. Но такое определение элементов страницы отсутствует в IE, поэтому строка if (window.HTMLElement), как ты уже заметила, "определяет" тип браузера, т.е. код ветки будет выполнен, например, для FF/Opera, но не для IE.

var element = HTMLElement.prototype:
Механизм прототипов (prototypes) в JS позволяет определять новые методы/свойства для объектов, другими словами, используя поле "prototype" можно добавить несуществующий метод, например, для всех строковых переменных: 

String.prototype.calcSpaces = function () {[здесь подсчитываем количество пробелов строки]}

Далее для любой переменной строкового типы можно вызвать этот метод: var spacesCnt = myString.calcSpaces();
------------
var capture = ["click", "mousedown", "mouseup", "mousemove", "mouseover", "mouseout"];
Это просто массив со списком имен событий, для которых мы определяли перехват.
В принципе, в нашем случае нужен был только клик, поэтому можно было просто задавать далее строку "click".

element.setCapture = function() {...}

Это ^ как раз определение нового метода setCapture() для всех HTML-элементов страницы, или, если записать по-другому:

HTMLElement.prototype.setCapture = function() {...}

this._capture = function(e) {...}

Здесь ^ создается обработчик событий, т.е. данная функция будет вызываться каждый раз, когда происходит како-либо событие на каком-либо HTML элементе. Параметр "e" - объект самого события (event).

var event = document.createEvent("MouseEvents");
with (e) event.initMouseEvent(type, bubbles, cancelable, view, detail, screenX, screenY, clientX, clientY,
                                                ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget);

Создаем ^ новый объект события на основе перехватываемого (e).

self.dispatchEvent(event);

^ Генерируем созданное событие на HTML элементе (в IE есть еще подобный метод fireEvent(eventType)).

window.addEventListener(capture[i], this._capture, true);

^ Регистрируем события (которые перечислены в массиве) для HTML-элемента.

И, наконец, element.releaseCapture = function() {...} - дерегистрируем события.

Вот и все.   

Burrr, предлагаю маленький архивчик со страничкой и сценарием. Сделал все с использованием методов addEventListener/attachEvent  (даже на страничке разместил цитату из стандарта на тему "как выгодно использование" этих методов ;) )...

Присоединённый файл ( Кол-во скачиваний: 29 )
 test.rar 1,75 Kb