Как обнаружить щелчок за пределами элемента?

Вы можете прослушать событие javascript click на document, а затем убедиться, что addclass #menucontainer не является предком или javascript целью элемента, по которому jquery-post был выполнен щелчок, с помощью vanillajs .closest().

Если это не так, то выбранный jquery-post элемент находится за пределами js #menucontainer, и вы можете безопасно скрыть jquery-callback его.

$(document).click(function(event) { 
  var $target = $(event.target);
  if(!$target.closest('#menucontainer').length && 
  $('#menucontainer').is(":visible")) {
    $('#menucontainer').hide();
  }        
});

Изменить - 23 июня 2017 г.

Вы также можете выполнить click очистку после прослушивателя javascript-library событий, если планируете .js закрыть меню и не хотите js прослушивать события. Эта addclass функция очистит только недавно vanillajs созданный прослушиватель, сохранив js все остальные прослушиватели js кликов на document. С синтаксисом jquery-post ES2015:

export function hideOnClickOutside(selector) {
  const outsideClickListener = (event) => {
    const $target = $(event.target);
    if (!$target.closest(selector).length && $(selector).is(':visible')) {
        $(selector).hide();
        removeClickListener();
    }
  }

  const removeClickListener = () => {
    document.removeEventListener('click', outsideClickListener)
  }

  document.addEventListener('click', outsideClickListener)
}

Изменить - 11 марта 2018 г.

Для тех, кто не хочет javascript-library использовать jQuery. Вот click приведенный выше код на обычном js vanillaJS (ECMAScript6).

function hideOnClickOutside(element) {
    const outsideClickListener = event => {
        if (!element.contains(event.target) && isVisible(element)) { // or use: event.target.closest(selector) === null
          element.style.display = 'none'
          removeClickListener()
        }
    }

    const removeClickListener = () => {
        document.removeEventListener('click', outsideClickListener)
    }

    document.addEventListener('click', outsideClickListener)
}

const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length ) // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js 

ПРИМЕЧАНИЕ. Это vanillajs основано на комментарии Алекса, который click просто использует !element.contains(event.target) вместо jquery-callback части jQuery.

Но element.closest() теперь также click доступен во всех основных clicked браузерах (версия W3C немного .js отличается от версии jQuery). Полифиллы jquery можно найти здесь: Element.closest()

Изменить - 21 мая 2020 г.

В случае, если addclass вы хотите, чтобы пользователь javascript-library мог щелкать и перетаскивать addclass внутри элемента, затем отпустите jquery кнопку мыши за пределами js элемента, не закрывая элемент:

      ...
      let lastMouseDownX = 0;
      let lastMouseDownY = 0;
      let lastMouseDownWasOutside = false;

      const mouseDownListener = (event: MouseEvent) => {
        lastMouseDownX = event.offsetX
        lastMouseDownY = event.offsetY
        lastMouseDownWasOutside = !$(event.target).closest(element).length
      }
      document.addEventListener('mousedown', mouseDownListener);

И js в outsideClickListener:

const outsideClickListener = event => {
        const deltaX = event.offsetX - lastMouseDownX
        const deltaY = event.offsetY - lastMouseDownY
        const distSq = (deltaX * deltaX) + (deltaY * deltaY)
        const isDrag = distSq > 3
        const isDragException = isDrag && !lastMouseDownWasOutside

        if (!element.contains(event.target) && isVisible(element) && !isDragException) { // or use: event.target.closest(selector) === null
          element.style.display = 'none'
          removeClickListener()
          document.removeEventListener('mousedown', mouseDownListener); // Or add this line to removeClickListener()
        }
    }