Comment détecter un clic à l'extérieur d'un élément ?

Question

J'ai quelques menus HTML que j'affiche entièrement lorsque l'utilisateur clique sur l'en-tête de ces menus. Je souhaite masquer ces éléments lorsque l'utilisateur clique en dehors de la zone de menu.

Est-ce possible avec jQuery ?

$("#menuscontainer").clickOutsideThisElement(function() {
    // Masquer les menus
});

Answer 1

Vous pouvez écouter document 上的 click 事件，然后确保 #menucontainer 不是被单击元素的祖先或目标通过使用 .closest().

Sinon, l'élément cliqué est à l'extérieur #menucontainer et vous pouvez le masquer en toute sécurité.

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

Edit – 23 juin 2017

Vous pouvez également nettoyer après l'écouteur d'événements si vous envisagez de fermer le menu et souhaitez arrêter d'écouter les événements. Cette fonction nettoiera uniquement les écouteurs nouvellement créés, laissant tous les autres écouteurs de clic activés document. Utilisation de la syntaxe 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);
}

Edit – 3 novembre 2018

Pour ceux qui ne veulent pas utiliser jQuery. Il s'agit du code simple vanillaJS (ECMAScript6) ci-dessus.

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 

Remarque : Ceci est basé sur le commentaire d'Alex, en utilisant simplement le !element.contains(event.target) au lieu de la partie jQuery.

Mais element.closest() fonctionne désormais également dans tous les principaux navigateurs (la version W3C est légèrement différente de la version jQuery). Polyfill peut être trouvé ici : Element.closest()

Modifier – 2020-05-21

Si vous souhaitez que l'utilisateur puisse cliquer et faire glisser à l'intérieur d'un élément puis relâcher la souris en dehors de l'élément sans fermer l'élément :

...
      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);

dans 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()
        }
    }

Answer 2

Attachez un événement de clic au corps du document de la fenêtre fermée. Attachez un événement de clic distinct au conteneur pour arrêter la propagation vers le corps du document.

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});