WayToLearnX » Développement Web » jQuery » Comment détecter un clic en dehors d’un élément avec jQuery

Comment détecter un clic en dehors d'un élément avec jQuery

Comment détecter un clic en dehors d’un élément avec jQuery

juillet 7, 2019janvier 1, 2021 Amine KOUIS Aucun commentaire

Dans jQuery, si vous voulez savoir quand un clic se produit en dehors d’un élément, vous devez utiliser la méthode .stopPropagation().

La méthode .stopPropagation() empêche les événements de se propager aux éléments parents. Cela signifie « Si on clique sur un élément enfant, le clic ne devrait pas se produire pour l’élément parent ».

Code HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Détecter un clic en dehors d'un élément avec jQuery</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
      // Mettez le code jQuery ci-dessous ici.
    </script>
    <style type="text/css">
      /* Mettez le style CSS ci-dessous ici */
    </style>
  </head>
  <body>
    <div id='mydiv'>Lorem ipsum</div>
  </body>
</html>

Code jQuery:

jQuery(function($){
  $('#mydiv').click(function(e){
    alert('clicked inside');
    e.stopPropagation();
  });
  $(document).click(function() {
    alert('clicked outside');
	});
});

Code CSS:

div {
    padding: 25px;
    margin: 10px;
    border: 2px solid red;
    float: left;
}

Résultat
Lorem ipsum

QCMs qui pourraient vous intéresser :

Laisser un commentaire Annuler la réponse