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

Question

J'ai quelques menus HTML, que j'affiche complètement lorsqu'un utilisateur clique sur l'en-tête de ces menus. Je voudrais cacher ces éléments lorsque l'utilisateur clique en dehors de la zone des menus.

Est-ce que quelque chose comme cela est possible avec jQuery ?

$("#menuscontainer").clickOutsideThisElement(function() {
    // Hide the menus
});

Answer 1

C'est 2020 et vous pouvez utiliser event.composedPath()

De : https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath

La méthode composedPath() de l'interface Event renvoie le chemin de l'événement, qui est un tableau des objets sur lesquels les listeners seront invoqués.

const target = document.querySelector('#myTarget')

document.addEventListener('click', (event) => {
  const withinBoundaries = event.composedPath().includes(target)

  if (withinBoundaries) {
    target.innerText = 'Click happened inside element'
  } else {
    target.innerText = 'Click happened **OUTSIDE** element'
  } 
})

/* just to make it good looking. you don't need this */
#myTarget {
  margin: 50px auto;
  width: 500px;
  height: 500px;
  background: gray;
  border: 10px solid black;
}

<div id="myTarget">
  click me (or not!)
</div>

Answer 2

Après des recherches, j'ai trouvé trois solutions qui fonctionnent (j'ai oublié les liens des pages pour référence)

Première solution

<script>
    //The good thing about this solution is it doesn't stop event propagation.

    var clickFlag = 0;
    $('body').on('click', function () {
        if(clickFlag == 0) {
            console.log('hide element here');
            /* Hide element here */
        }
        else {
            clickFlag=0;
        }
    });
    $('body').on('click','#testDiv', function (event) {
        clickFlag = 1;
        console.log('showed the element');
        /* Show the element */
    });
</script>

Deuxième solution

<script>
    $('body').on('click', function(e) {
        if($(e.target).closest('#testDiv').length == 0) {
           /* Hide dropdown here */
        }
    });
</script>

Troisième solution

<script>
    var specifiedElement = document.getElementById('testDiv');
    document.addEventListener('click', function(event) {
        var isClickInside = specifiedElement.contains(event.target);
        if (isClickInside) {
          console.log('You clicked inside')
        }
        else {
          console.log('You clicked outside')
        }
    });
</script>

Answer 3

$("#menuscontainer").click(function() {
    $(this).focus();
});
$("#menuscontainer").blur(function(){
    $(this).hide();
});

Ça marche très bien pour moi.

Answer 4

Il existe désormais un plugin pour cela : événements extérieurs ( article de blog )

Ce qui suit se produit lorsqu'un clickoutside (WLOG) est lié à un élément :

• l'élément est ajouté à un tableau qui contient tous les éléments avec clickoutside manipulateurs
• a ( espace nom ) cliquez sur Le gestionnaire est lié au document (s'il n'y est pas déjà).
• sur n'importe quel cliquez sur dans le document, le clickoutside est déclenché pour les éléments de ce tableau qui ne sont pas égaux à ou un parent de l'élément cliquez sur -événements cible
• En outre, la cible événementielle de l clickoutside est défini sur l'élément sur lequel l'utilisateur a cliqué (vous savez ainsi ce que l'utilisateur a cliqué, et pas seulement qu'il a cliqué à l'extérieur).

Ainsi, aucun événement n'est empêché de se propager et des cliquez sur peuvent être utilisés "au-dessus" de l'élément avec le gestionnaire d'extérieur.

Answer 5

Cela a parfaitement fonctionné pour moi !

$('html').click(function (e) {
    if (e.target.id == 'YOUR-DIV-ID') {
        //do something
    } else {
        //do something
    }
});