Как убрать класс при нажатии на пустую область?

Question

[adrigez]

Здравствуйте все. Есть такой код:

$('.nav-submenu').on('click', function(a) {submenu(this)});
           
           function submenu(a) {
               $this = a;
               $subid = $($this).data("submenu-id");
               $($subid).toggleClass("close");
               return false;
           }

При нажатии на пункт меню с классом "nav-submenu" выполняется функция "submenu", которая берет идентификатор подменю из атрибута "data-submenu-id" и добавляет/убирает к нему класс "close". Все работает хорошо, однако не могу понять как осуществить удаление класса "close" при нажатии на область вне самого подменю. Может, кто-то знает решение?

Answer 1

[Илья Агарков]

Как вариант отлавливать клик на body, и при клике убирать класс. т.е.

$('body').on('click', function(){
  // убираем класс
})

а при клике на самом элементе отменить всплывание событие. то есть событие не дойдет до body

$('.nav-submenu').on('click', function(e){
  e.stopPropagation();
  // остальной код
})

P.S. Ваш кода можно сделать куда приятнее, если заменить

$('.nav-submenu').on('click', function(a) {submenu(this)});

на
$('.nav-submenu').on('click', submenu);
А внутри submenu this и так будет ссылаться на объект, который вы в вашем случае передаете через параметр a

Comments

[Алексей Уколов]

> Как вариант отлавливать клик на body, и при клике убирать класс. т.е.
Это сработает, только если на странице нет обработчиков, внутри которых стоит return false. Из них событие просто не всплывет до body.

[Илья Агарков]

Алексей Уколов: вы не совсем правы, это не сработает только если вы будете кликать по элементам на которых также навешаны обработчики с запретом всплывания, что на самом деле редкость =) а return false не останавливает всплывание

[Алексей Уколов]

Останавливает - stackoverflow.com/questions/1357118/event-preventd...

[Илья Агарков]

Алексей Уколов: ок, c jquery возможно, но повторюсь. return false в обработчиках редкость, так что мое решение подходит для большеснтва случаев

[Алексей Уколов]

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

[adrigez]

Илья Агарков: отлично, спасибо большое!

[Алексей Уколов]

adrigez: если вас ответ устроил, хорошим тоном считается отметить его как решение.

Answer 2

[Shultc]

Отслеживайте потерю фокуса.
Например:
api.jquery.com/focusout
api.jquery.com/blur