Comment détecter un clic en dehors d'un élément en JQuery ?
Il est notamment possible de modifier un code pour détecter un clic effectué en dehors d'un élément. Voici comment faire.
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
}
});