Как выполнить действие по клику ВНЕ определённой области?

Question

[0leg5ergeev]

т.е. есть у меня блоки .column3 и .column1, как задать действие, когда клик мимо них?

Comments

[Alexander]

Я бы вам предложил подумать.
$(body).click(function(){
alert('???');
});

[0leg5ergeev]

Alexander: думаю, что alert - это немного не то.

[Alexander]

0leg5ergeev: Я так понял вы начинающий. подставьте место alert то что вы захотите.

[0leg5ergeev]

Alexander: да говнокодер, что там. Думаешь, что клик по body будет верным решением? Наследования нет?

[0leg5ergeev]

Alexander: проверил и удивился.

Answer 1

[Сергей Горячев]

Закрытие элемента по клику вне его области, jquery
Логика та же.

Comments

[0leg5ergeev]

прошёл по ссылке в решении, или не работает код, или я идиот. скорее, конечно, второе. не могли бы объяснить?

[Сергей Горячев]

0leg5ergeev: если дадите конкретики, фидл например, можно будет посмотреть, а так по ссылке ищите ответ, там куча вариантов) Вы же толком не говорите, чего хотите, даже действие не обозначили)

[Иван Волков]

0leg5ergeev:

[0leg5ergeev]

Иван Волков:

[Сергей Горячев]

Какой у вас диалог насыщенный)))

[Иван Волков]

Sergey Goryachev: Тостер код съедает))

[0leg5ergeev]

Иван Волков: можно ответом?

[littleguga]

Иван Волков: пишите код через <code>code</code>

[Иван Волков]

littleguga: Спасибо!

Answer 2

[Иван Волков]

Используйте jQuery -> closest

Comments

[Иван Волков]

https://api.jquery.com/closest/

Answer 3

[iCat]

Для этого необходимо при клике на .column1 или .column3 останавливать "всплывание" события, а функцию, которую надо выполнять при клике вне этих элементов, повесить на "верхний" элемент, например, на body, и внутри этой функции первым делом проверять, остановлено ли всплывание, и если остановлено, то прерывать выполнение функции.

function clickAnywhere (e) {
  if (e.isPropagationStopped()) return; // propagation was stopped, exiting
  // do if propagation was not stopped
  ..
}
$('body').on('click', clickAnywhere);
$('.column1, .column3').on('click', function(e) {
  e.stopPropagation();
});

Рабочий пример.

Comments

[Иван Волков]

да не нужно на body нихрена вешать, блин
это не верная концепция, ИМХО
просто смотрите в пример из статьи и подставляйте свои CSS селекоры - goo.gl/RCxb5Q
аля

if ($(event.target).closest(".column1, .column3").length) return;

[iCat]

Иван Волков: я все же придерживаюсь варианта с остановкой всплывания события хотя бы потому, что использование .closest() во-первых усложняет читабельность кода, т.к. требует писать длинное условие при наличии большого количества элементов, а во-вторых лишний раз использует поиск элементов в дереве.

[Иван Волков]

iCat: Абсолютно не согласен по поводу читаемости кода и моего варианта в одну читабельную строчку) Но тут каждому своё, да
А по поводу производительности, тут экономия на спичках
Если б там какой ExtJs был (образно), или ещё какое-то Дом дерево хитро сгенерированное, то да, можно было бы задумываться, а так, никто этих пару миллисекунд не заметит
а код при этом понятней, КМК и меньше занимает
ну это ещё раз, моё лично мрнение, ничего личного

[iCat]

Иван Волков: только этот отказ от "экономии на спичках" развращает разработчиков, и потом даже на вполне сильном железе открываешь какой-нибудь сайт, а он тормозит нещадно. Я вполне понимаю, что опытный разработчик может сделать и так и эдак в зависимости от ситуации, но начинающим все же полезно знать разные варианты, и понимать их плюсы и минусы.

Answer 4

[Артем Спиридонов]

$(document).on('click', '*:not('.column1, .column3')', function() { do_smth(); });