Обнаруживать элемент внешнего элемента?

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

$('#menu div').live('click', function() {
    // Close other open menu items, if any.
    // Toggle the clicked menu item.

    $('body').one('click', function(event) {
        // Hide the menu item.
        event.stopPropagation();
    });
});

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

"Правильное" поведение работает следующим образом:

Щелчок по пункту меню открывает его.
Щелчок по тому же пункту меню (или его дочерние элементы) закрывает его.
Щелчок по другому пункту меню закрывает первый, открывает вторую.
Отключение от пунктов меню (открытие) закрывает их.

Я попробовал следующее вместо вышеуказанного $('body').one(), чтобы игнорировать клики по элементам меню с небольшим успехом:

// Captures click on menu items in spite of the not.
$('*').not('#menu *').one('click', function() { // Hide menu }
$('*:not(#menu)').one('click', function() { // Hide menu }

Как всегда, спасибо за любую помощь!

Ответ 1

Просто переместите обработчик кликов тела снаружи и сделайте что-то вроде этого:

$('body').bind('click', function(e) {
    if($(e.target).closest('#menu').length == 0) {
        // click happened outside of menu, hide any visible menu items
    }
});

В комментариях было неправильно указано, что e.target не работает в IE; это не так, поскольку объект события jQuery исправляет эти несоответствия там, где это необходимо (IE, Safari).

Ответ 2

Я написал это давным-давно, перед днями славы jQuery...

function clickedOutsideElement(elemId) {
  var theElem = getEventTarget(window.event);
  while(theElem != null) {
    if(theElem.id == elemId)
      return false;
    theElem = theElem.offsetParent;
  }
  return true;
}

function getEventTarget(evt) {
  var targ = (evt.target) ? evt.target : evt.srcElement;
  if(targ != null) {
    if(targ.nodeType == 3)
      targ = targ.parentNode;
  }
  return targ;
}

document.onclick = function() {
  if(clickedOutsideElement('divTest'))
    alert('Outside the element!');
  else
    alert('Inside the element!');
}