Si vous programmez en Javascript, vous rencontrez probablement le cas où vous souhaitez que les menus s'ouvrent en un clic et se ferment lorsque l'utilisateur clique en dehors du menu. J'ai développé un moyen assez simple de faire cela. J'ajoute un écouteur d'événement au corps du document. Lorsque quelqu'un clique dessus, nous recherchons l'identifiant cible de l'événement. S'il correspond à l'ID de la boîte, ne faites rien. Si ce n'est pas le cas, fermez le menu.
Pour aller un peu plus loin, il est inefficace de laisser un écouteur d’événements click sur tout le corps quand il n’est pas utilisé. Dans ce cas, si le menu n'a pas encore été ouvert, il n'y a aucune raison d'écouter un clic en dehors du menu. Ajoutez l'écouteur d'événement dans le rappel de la div affichée. Dans le même ordre d'idées, lorsque la div est à nouveau masquée, supprimez l'écouteur d'événements.
Show Div Cliquez dans la boîte noire, rien ne se passe. Cliquez à l'extérieur, il disparaît $ ('# showbox'). Click (function () {$ ('# bigbox'). Show (function () {document.body.addEventListener ('click', boxCloser, false);}) ;}); fonction boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('click', boxCloser, false); $ ('# bigbox'). hide (); }}
Assurez-vous également d'inclure jQuery dans votre projet car certaines des fonctionnalités ci-dessus utilisent cette bibliothèque.
