Détecter les clics en dehors d'un élément HTML avec JavaScript/jQuery

Cet article explique comment détecter les clics en dehors d'un élément HTML dans JavaScript et jQuery.

1. Utiliser jQuery

Ici, l'idée est d'écouter l'événement click du document avec jQuery .click(handler) méthode. Ensuite, lorsqu'un clic est détecté, vérifiez si l'élément cliqué n'est pas l'élément lui-même ou un descendant de celui-ci. En fonction du résultat, nous pouvons dire que le clic est effectué à l'intérieur ou à l'extérieur de l'élément HTML. Voici à quoi ressemblerait le code :

jQuery

$(document).click(function() {

var obj = $("#container");

if (!obj.is(event.target) && !obj.has(event.target).length) {

alert("Outside click detected!");

}

else {

alert("Inside click detected!");

}

});

HTML

1	<div id="container"></div>

Modifier dans JSFiddle

Une autre manière plausible est d'utiliser le .closest() méthode, comme indiqué ci-dessous :

jQuery

$(document).on("click", function(event) {

var obj = $("#container");

if (!$(event.target).closest(obj).length) {

alert("Outside click detected!");

}

else {

alert("Inside click detected!");

}

});

HTML

1	<div id="container"></div>

Modifier dans JSFiddle

2. Utiliser JavaScript

En JavaScript pur, vous pouvez lier un gestionnaire d'élément pour écouter les événements de clic sur la page, et si la cible du clic n'est pas l'un des descendants de l'élément, nous pouvons dire que le clic est effectué en dehors de l'élément.

JS

document.addEventListener("mouseup", function(event) {

var obj = document.getElementById("container");

if (!obj.contains(event.target)) {

alert("Outside click detected!");

}

else {

alert("Inside click detected!");

}

});

HTML

1	<div id="container"></div>

Modifier dans JSFiddle

Il s'agit de détecter un clic en dehors d'un élément HTML dans JavaScript et jQuery.