Comment détecter un clic en dehors d'un élément en JQuery ?

Grâce au langage JavaScript, on peut avec les évènements détecter un clic effectué sur un élément particulier. La librairie JQuery facilite l'écriture du code et notamment la gestion des évènements. Il est notamment possible de modifier un code pour détecter un clic effectué en dehors d'un élément.

Pour détecter un clic en dehors d'un élément, il faut attacher une méthode à l'évènement click sur deux éléments : la page entière et l'élément ciblé. Dans la méthode de clic de l'élément, utilisez la méthode event.stopPropragation(); qui va arrêter l'évènement. L'évènement ne parviendra pas jusqu'à la page entière. Vous n'aurez donc plus qu'à traiter les clics en dehors dans la méthode liée à l'évènement click de la fenêtre.

$(window).click(function()
{
//Le code sera exécuté pour tous les clics effectués en dehors de l'élément monElement
});
$('#monElement').click(function(event)
{
event.stopPropagation();
});

Il faut cependant faire attention car stopper la propagation d'un évènement peut avoir des conséquences inattendues dans le comportement de la page web. Testez le code avant de l'utiliser sur votre site.

Une autre solution qui n'utilise pas la méthode stopPropagation consiste à n'écrire que la méthode liée à l'évènement click sur la fenêtre. Dans le code de cette méthode, utilisez la méthode de JQuery closest(). Cette méthode permet de rechercher pour un élément un autre élément qui correspond au sélecteur transmis en argument. La recherche est effectuée sur l'élément et tous ces ancêtres. Si la recherche ne trouve pas d'élément, alors le clic a eu lieu en dehors de l'élément ciblé.

$(document).click(function(event) { 
if(!$(event.target).closest('#monElement).length) {
//Le clic s'est produit en dehors de l'élément monElement
}
});

JQuery