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

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

$('#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!');
}