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

Question

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

Demandé el 30 de Septembre, 2008: Quand la question a-t-elle été
263528 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la 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
});

Demandé el 30 de Septembre, 2008 par Sergio del Amo

47 votes

Voici un exemple de cette stratégie : jsfiddle.net/tedp/aL7Xe/1

Commenté el 9 de Novembre, 2011 par Ted

21 votes

Comme Tom l'a mentionné, vous voudrez lire css-tricks.com/dangers-stopping-event-propagation avant d'utiliser cette approche. L'outil jsfiddle est cependant assez cool.

Commenté el 2 de Janvier, 2015 par J Coombs

3 votes

Obtenir une référence à l'élément puis à event.target, et enfin != ou == les deux, puis exécuter le code en conséquence

Commenté el 7 de Juillet, 2015 par Rohit Kumar

Afficher 3 autres commentaires

Answer 1

5 Réponses

Answer 2

19voto

Chu Yeow Points 751

J'ai eu du succès avec quelque chose comme ça :

var $menuscontainer = ...;

$('#trigger').click(function() {
  $menuscontainer.show();

  $('body').click(function(event) {
    var $target = $(event.target);

    if ($target.parents('#menuscontainer').length == 0) {
      $menuscontainer.hide();
    }
  });
});

La logique est la suivante : lorsque #menuscontainer est affiché, liez un gestionnaire de clics au corps qui masque #menuscontainer seulement si la cible (du clic) n'est pas un enfant de celui-ci.

Répondu el 2 de Décembre, 2010 par Chu Yeow (751 Points )

Answer 3

19voto

Jovanni G Points 127

Je suis surpris que personne n'ait reconnu focusout événement :

var button = document.getElementById('button');
button.addEventListener('click', function(e){
  e.target.style.backgroundColor = 'green';
});
button.addEventListener('focusout', function(e){
  e.target.style.backgroundColor = '';
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <button id="button">Click</button>
</body>
</html>

Répondu el 12 de Février, 2018 par Jovanni G (127 Points )

Answer 4

17voto

Dan Philip Points 3193

L'événement a une propriété appelée event.path de l'élément qui est un "liste statique ordonnée de tous ses ancêtres dans l'ordre de l'arbre". . Pour vérifier si un événement provient d'un élément DOM spécifique ou de l'un de ses enfants, il suffit de vérifier le chemin de cet élément DOM spécifique. Il peut également être utilisé pour vérifier plusieurs éléments en contrôlant logiquement OR le contrôle de l'élément dans le some fonction.

$("body").click(function() {
  target = document.getElementById("main");
  flag = event.path.some(function(el, i, arr) {
    return (el == target)
  })
  if (flag) {
    console.log("Inside")
  } else {
    console.log("Outside")
  }
});

#main {
  display: inline-block;
  background:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <ul>
    <li>Test-Main</li>
    <li>Test-Main</li>
    <li>Test-Main</li>
    <li>Test-Main</li>
    <li>Test-Main</li>
  </ul>
</div>
<div id="main2">
  Outside Main
</div>

Donc, dans votre cas, ce devrait être

$("body").click(function() {
  target = $("#menuscontainer")[0];
  flag = event.path.some(function(el, i, arr) {
    return (el == target)
  });
  if (!flag) {
    // Hide the menus
  }
});

Répondu el 14 de Avril, 2017 par Dan Philip (3193 Points )

Answer 5

16voto

Bohdan Points 154

En tant que variante :

var $menu = $('#menucontainer');
$(document).on('click', function (e) {

    // If element is opened and click target is outside it, hide it
    if ($menu.is(':visible') && !$menu.is(e.target) && !$menu.has(e.target).length) {
        $menu.hide();
    }
});

Il n'a aucun problème avec arrêt de la propagation des événements et prend mieux en charge les menus multiples sur la même page, où le fait de cliquer sur un deuxième menu alors qu'un premier est ouvert laissera le premier ouvert dans la solution stopPropagation.

Répondu el 24 de Juillet, 2014 par Bohdan (154 Points )

Answer 6

14voto

nazar kuliyev Points 79

J'ai trouvé cette méthode dans un plugin de calendrier jQuery.

function ClickOutsideCheck(e)
{
  var el = e.target;
  var popup = $('.popup:visible')[0];
  if (popup==undefined)
    return true;

  while (true){
    if (el == popup ) {
      return true;
    } else if (el == document) {
      $(".popup").hide();
      return false;
    } else {
      el = $(el).parent()[0];
    }
  }
};

$(document).bind('mousedown.popup', ClickOutsideCheck);

Répondu el 28 de Juillet, 2011 par nazar kuliyev (79 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: