click по конкретной области

DjTarik · March 28, 2011

Ситуация:

создал всплывающий див (что-то типо модального окна);
соответственно есть див, который поверх всего сайта;
нужно закрывать его по клику в любой точке, кроме самого дива.

Как такое делается?

Полагаю, что через event, но не догоняю...

Ссылки, корректный запрос в гугл приветствуются.

Спасибо.

blaga · March 29, 2011

jquery ?


$('#blockBack').click(function(){ //кликаем на див-подложку
  $('#dialog').fadeOut(500); //убираем окно
  $('#blockBack').fadeOut(500);  //убираем див-подложку
});

Edited March 29, 2011 by blaga

Быколай · March 29, 2011

Ситуация:
создал всплывающий див (что-то типо модального окна);
соответственно есть див, который поверх всего сайта;
нужно закрывать его по клику в любой точке, кроме самого дива.
Как такое делается?
Полагаю, что через event, но не догоняю...
Ссылки, корректный запрос в гугл приветствуются.
Спасибо.

как вариант, если надо убрать совсем из документа


	$("div#mask").live('click', function()
	{
		$('div#win').remove(); // пристрелили окно
		$('div#mask').remove(); // пристрелили подложку 
		return false;
	});

Синдром · March 29, 2011

поступить можно двумя способами

1. всплывающий див лежит в том же контейнере который закрывает сайт

2. мусорная верстка, просто где нибудь рядом с всплывающим контейнером создаете пустой контейнер который будет и закрывать сайт.

в первом случае вам нужно будет сделать проверку на всплывающие события

http://javascript.ru/tutorial/events/intro#vsplyvayushchie-sobytiya-bubbling

то есть если контейнер который перекрывает сайт является первым в списке событий то запускать механизм закрытия, если нет то нет. Если вы используете библиотеку типа MooTools jQuery и тд. то они расширяют объект события и прямо в нем можно посмотреть на какой элемент был инициализирован клик в jQuery это свойство target вроде...

а во втором случае все гораздо проще, вешаете событие на пустой контейнер и все

DjTarik · March 29, 2011

Меня совсем НЕ интересует JQ. Мне нужен "чистый" JS и теория, как это делается.

Как я понял:

1. На 'body' вешаю событие

2. через 'event' ищу, на каком элементе был 'click'

3. если этот элемент НЕ является содержимым моего дива (модального окна) - запускаю функцию, которая закроет окно

Так? O_o

sigma77 · March 29, 2011

Меня совсем НЕ интересует JQ. Мне нужен "чистый" JS и теория, как это делается.
Как я понял:
1. На 'body' вешаю событие
2. через 'event' ищу, на каком элементе был 'click'
3. если этот элемент НЕ является содержимым моего дива (модального окна) - запускаю функцию, которая закроет окно
Так? O_o

Так :devil:

Great Rash · March 29, 2011

Нет не так.

Давайте разберемся что такое модальное окно. Это окно которое не дает пользователю произвести какие либо действия пока он что-то не сделает внутри окна (например пока не нажмет "ОК"). Чтобы этого добиться нам надо перекрыть всю страницу неким абсолютно позиционированным дивом с шириной и высотой 100%.

Вот и нужно повесить клик на этот перекрывающий див. И не надо ничего вешать на <body>.

sigma77 · March 29, 2011

Нет не так.
Давайте разберемся что такое модальное окно. Это окно которое не дает пользователю произвести какие либо действия пока он что-то не сделает внутри окна (например пока не нажмет "ОК"). Чтобы этого добиться нам надо перекрыть всю страницу неким абсолютно позиционированным дивом с шириной и высотой 100%.

Ну это совсем не обязательно так.

Great Rash · March 29, 2011

Обязательно. Окна с иным поведением не являются модальными.

UPD: Или имелось в виду перекрывание всей страницы дивом? Тогда интересно узнать как сделать по другому.

Быколай · March 29, 2011

Ну это совсем не обязательно так.

таки так :devil:

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

видимо ТС не совсем верно выразился. но и в этом случае не стоит body отслеживать. всё таки вернее будет именно на клик по подложке реагировать.

sigma77 · March 29, 2011

Обязательно. Окна с иным поведением не являются модальными.
UPD: Или имелось в виду перекрывание всей страницы дивом? Тогда интересно узнать как сделать по другому.

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

А чем плох клик по боди?

Great Rash · March 29, 2011

Если речь идет о модальном окне, то должно обязательно блокировать. У топикстартера речь идет именно о модальном, ибо:

1. создал всплывающий див (что-то типо модального окна);

А чем плох клик по боди?

Клик по <body> плох тем, что:

1. Если уж ставить клик, то на document ибо абсолютно позиционированный див может из <body> вылезать в некоторых случаях.

2. Плохо тем, что придется пробегать по всей цепочке DOM, чтобы узнать не кликнули ли мы случайно не на тот див. А это медленно. Операции с DOM вообще медленные.

DjTarik · March 29, 2011

Нет не так.
Давайте разберемся что такое модальное окно. Это окно которое не дает пользователю произвести какие либо действия пока он что-то не сделает внутри окна (например пока не нажмет "ОК"). Чтобы этого добиться нам надо перекрыть всю страницу неким абсолютно позиционированным дивом с шириной и высотой 100%.
Вот и нужно повесить клик на этот перекрывающий див. И не надо ничего вешать на <body>.

Обязательно. Окна с иным поведением не являются модальными.
UPD: Или имелось в виду перекрывание всей страницы дивом? Тогда интересно узнать как сделать по другому.

таки так
В графическом интерфейсе пользователя модальным называется окно, которое блокирует работу пользователя с родительским приложением до тех пор, пока пользователь это окно не закроет.
видимо ТС не совсем верно выразился. но и в этом случае не стоит body отслеживать. всё таки вернее будет именно на клик по подложке реагировать.

Если речь идет о модальном окне, то должно обязательно блокировать. У топикстартера речь идет именно о модальном, ибо:
Клик по <body> плох тем, что:
1. Если уж ставить клик, то на document ибо абсолютно позиционированный див может из <body> вылезать в некоторых случаях.
2. Плохо тем, что придется пробегать по всей цепочке DOM, чтобы узнать не кликнули ли мы случайно не на тот див. А это медленно. Операции с DOM вообще медленные.

Эмм.... =) Ну у меня теперь 2 варианта:

1. Модальное окно ("Это окно которое не дает пользователю произвести какие либо действия пока он что-то не сделает внутри окна")

2. Просто див, который был в коде сначала display: none; а потом появился, и его нужно снова скрыть

1 - Всё понятно, что на что вешать. Но если у меня есть весь див, который перекрывает сайт, а в нем - нужное содержимое - 'click' же будет по всем дочерним элементам? Тут отлавливать всплытие надо?

2 - Если на 'body' плохо для DOM - то как тогда? Ведь теперь перекрывается не вся область. А клик отследить надо.

Great Rash · March 29, 2011

Ах вот как... Хотелка подросла значит :devil:

1 - Всё понятно, что на что вешать. Но если у меня есть весь див, который перекрывает сайт, а в нем - нужное содержимое - 'click' же будет по всем дочерним элементам? Тут отлавливать всплытие надо?

У объекта Event есть метод .stopPropagation(), который останавливает распространение события. Для ИЕ есть свойство cancelBubble, которое делает тоже самое. Подробнее тут.

UPD: Вообще не очень хорошо помещать попап в перекрывающий див. Это должны быть независимые друг от друга элементы, не вложенные друг в друга.

2 - Если на 'body' плохо для DOM - то как тогда? Ведь теперь перекрывается не вся область. А клик отследить надо.

Да. В этом случае придется бегать по DOM. Тогда последовательность действий такова:

1) Вешаем обработчик на document.

2) При клике получаем элемент при помощи свойства event.target (event.srcElement для ИЕ).

3) Бежим по DOM наверх пока не встретим <body> и каждый раз проверяем родителя.

3.1) Если встретили <body> значит все в порядке и мы кликнули куда угодно, только не на попап, а значит можно закрывать окно.

3.2) Если event.target == попап или parentNode == попап, то мы кликнули на сам попап или на элемент внутри попапа, значит завершаем работу функции.

DjTarik · March 29, 2011

Ах вот как... Хотелка подросла значит
У объекта Event есть метод .stopPropagation(), который останавливает распространение события. Для ИЕ есть свойство cancelBubble, которое делает тоже самое. Подробнее тут.
UPD: Вообще не очень хорошо помещать попап в перекрывающий див. Это должны быть независимые друг от друга элементы, не вложенные друг в друга.
Да. В этом случае придется бегать по DOM. Тогда последовательность действий такова:
1) Вешаем обработчик на document.
2) При клике получаем элемент при помощи свойства event.target (event.srcElement для ИЕ).
3) Бежим по DOM наверх пока не встретим <body> и каждый раз проверяем родителя.
3.1) Если встретили <body> значит все в порядке и мы кликнули куда угодно, только не на попап, а значит можно закрывать окно.
3.2) Если event.target == попап или parentNode == попап, то мы кликнули на сам попап или на элемент внутри попапа, значит завершаем работу функции.

"3) Бежим по DOM наверх пока не встретим <body> и каждый раз проверяем родителя."

а можно поподробнее? Это как?

У меня есть елемент, по которому кликнули. И что - мне получается сверять его со всеми элементами в DOM?

Great Rash · March 29, 2011


function onClick(e, popupId) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  var popup = document.getElementById(popupID);

  while (target.parentNode && target.tagName.toLowerCase() != 'body') {
    if (target == popup) {
      alert('кликнули на элементе');
      return;
    }

    target = target.parentNode;
  }

  alert('кликнули вне элемента');
}

document.onclick = function(e) {
  onClick(e, 'myPopup');
}


<div id="myPopup">
  Попап
</div>

Как-то так.

DjTarik · March 30, 2011


function onClick(e, popupId) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  var popup = document.getElementById(popupID);

  while (target.parentNode && target.tagName.toLowerCase() != 'body') {
    if (target == popup) {
      alert('кликнули на элементе');
      return;
    }

    target = target.parentNode;
  }

  alert('кликнули вне элемента');
}

document.onclick = function(e) {
  onClick(e, 'myPopup');
}


<div id="myPopup">
  Попап
</div>

Как-то так.

Спасибо. Всё предельно понятно.

Пойду пробовать. Вроде всё работает.

Sign In

click по конкретной области

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information