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

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

Форум программистов > JavaScript: Общие вопросы > Свернуть при нажатии на страницу выпадающий список

Автор: abalich 26.9.2012, 22:48

Добрый вечер. Сделал выпадающий список на JS. НУ там все просто. есть DIV которые просто при нажатии увеличивает свою высоту и становиться overflow:auto а был hidden.
Но суть не в этом. Мне нужно что бы при нажатии на любое место в документе, он свернулся. Если я делаю document.onclick = function(){$('#myDiv').hide(); } то при самом нажатии на DIV что бы он развернулся, он сразу же пропадает.. т.е. нажатие на это DIV и есть document.onclick

Как это реализуется ?

Вот тут не смог разобраться, как сделано

http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html

Но как то же сделано)))

Автор: Evghenusi 26.9.2012, 23:01

я бы при клике на странице, проверил от кого пришёл клик, и если это не #myDiv то $('#myDiv').hide();

Автор: abalich 26.9.2012, 23:32

Evghenusi, подскажи как это сделать ? плиз!

Автор: Sanchezzz 27.9.2012, 07:39

Код


$(function(){

var    $html = $('html').get(0);
$(document).on('click', function(e) {
if(e.target === document.body | e.target === $html) {
  // этот клик будет срабатывать если только на body нажали а не на элементы внутри боди
  $('#ID_DIV').hide(280);
}
});
});

Если не нужна проверка, что это чистый боди убери условия проверки e.target === document.body | e.target === $html
Без проверки на любой элемент щелкаем менющка закрываться будет, тогда тебе придется построить исключения проверки на кликах самой менюшки по выше указанному примеру.
Что бы исключить той проблемы которая у тебя описана в вопросе решается проверкой $(this).get(0)!==e.target

Автор: Aliance 27.9.2012, 10:01

Зачем такие костыли? Данная проблема (а вообще говоря это не проблема, а фича) происходит из-за механизма capturing событий. Не буду расписывать что это такое, подробно можно почитать тут: http://forum.vingrad.ru/forum/topic-32350.html (2-5 посты).

Вот рабочий пример: http://jsfiddle.net/Aliance/N3cNR/

Автор: abalich 27.9.2012, 10:06

Sanchezzz, спасибо Не совсем разобрался как сделать что бы при нажатии на любой объект кроме нужного мне DIV

делаю вот так

Код


$(document).on('click', function(e){
                          if(e.target !== $('.imgselectfontname')){
                              $('.selectfontbox').hide();
                          }
                       });

т.е. хочу что бы при нажатии на любой место на сайте кроме imgselectfontname срабатывала функция

Добавлено через 5 минут и 36 секунд
Aliance, а если у меня при нажатии на нужный див функция вызывается т.е. стоит onclick=somefunction()
как передать e ?

Добавлено через 7 минут и 5 секунд
Aliance, Все спасибо РАЗОБРАЛСЯ event.stopPropagation()