Comment détecter qu'on a cliqué en dehors d'une div ?

Version imprimable

05/12/2012, 22h34
CinePhil

Comment détecter qu'on a cliqué en dehors d'une div ?

Bonjour,
Je cherche à détecter que l'utilisateur a cliqué en dehors d'une div affichée au dessus de la page pour effacer cette div.

En Javascript pur ou en JQuery si c'est lus simple.

Du vu et revu en jQuery :

Code:

1
2
3
4
5
$(document).mouseup(function (e){
    var container = $("#tadiv");
    if (container.has(e.target).length === 0)
        container.hide();
});

Merci pour le tuyau mais j'ai besoin d'un peu plus de précision et j'en donne sur le but de la manoeuvre.

J'ai une zone de texte pour saisir une recherche. En autocomplétion, si du contenu est trouvé apparaît sous la zone de texte une div avec la liste des résultats. Si on clique sur un résultat, on affiche le détail du résultat mais si on clique en dehors de la div de résultat, je dois la faire disparaître.

Ton code perturbe beaucoup l'autocomplétion. Peut-être ne l'ai-je pas mis où il faut, entre balises script dans le programme PHP qui contient la zone de recherche :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <script type="text/javascript"> $(document).mouseup(function (e){ var container = $("#search_result"); if (container.has(e.target).length === 0) container.hide(); }); </script> <div id="zone_search"> <form name="form_search" action="javascript:completeSearch('<?php echo $la_langue; ?>');" method="post" > <input type="text" name="input_search" value="<?php echo $trad_search; ?>" id="input_search" onclick="javascript:eraseSearch('<?php echo $la_langue; ?>');" onkeyup="javascript:interactiveSearch(this.value, '<?php echo $la_langue; ?>')" autocomplete="off" /> <input type="submit" name="button_search" value="" id="button_search" /> </form> <div id="search_result"> </div> </div>
La div de résultat est, comme son nom l'indique : <div id="search_result"> </div>

06/12/2012, 10h29
Bovino
@lightbulb, je pense que c'est plutôt le contraire qu'il faut faire... Toi, tu cherches si l'élément qui a reçu l'événement contient celui recherché, il faut plutôt vérifier si l'élément qui a reçu l'événement est contenu dans celui recherché :
Code:

1 2 3 4 5 6 $(document).on('click', function(e){ var $this = $(e.target); if(!$this.closest('#search_result')){ $("#search_result").hide(); } });
;)

Code:

1
2
3
4
5
$( document ).on( "click", function( e ){
    if ( e.target.id != "search_result" ){
        $( "#search_result" ).hide();
    }
});

06/12/2012, 12h05
Bovino

Daniel, si l'élément #search_result contient des enfants et que l'on clique sur l'un de ces enfants, ton code ne marche plus, d'où le .closest() ;)

Bonsoir

Je n'avais pas testé avec un élément enfant. :aie:

Ma réponse venait en réaction aux tests des vôtres, qui ne fonctionnent pas dans ma page de test.

J'ai utilisé closest() pour tenir compte de l'existence d'éléments enfants éventuels.

Cette Q/R n'est pas aussi triviale qu'il y paraît au premier abord.

Ma page de test :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="Daniel Hagnoul">
		<title>Forum jQuery</title>
		<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
		<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
		<style>
			.hyphens { -moz-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; }
			article { display:table-cell; text-align:justify; border:0.1rem dotted grey; }
			.table1, .table2 { border-collapse:separate; border-spacing:3rem; }
			.ligne { display:table-row; }
 
			.table1 .ligne { height:25rem; }
			.table1 article { width:40rem; vertical-align:top; }
 
			/*.table1 .ligne article:nth-of-type(1) { width:125rem; }*/
 
			.table2 .ligne { height:20rem; }
			.table2 article { width:80rem; }
 
			/* TEST */
			#search_result { margin: 1.2rem; padding: 0.6rem; width: 10rem; height: 10rem; border:0.1rem dotted red; }
			#search_result span { color: blue; }
		</style>
	</head>
	<body>
		<h1>Forum jQuery</h1>
		<h2>Titre 2</h2>
		<section class="conteneur">
			<section class="table1">
				<section class="ligne">
					<article>
 
<div id="search_result">Un texte <span>étrange</span> pour test.</div>
 
					</article>
					<article id="articleID">
 
					</article>
				</section>
			</section>
		</section>
		<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
			<time datetime="2012-11-26T00:45:35.960+01:00" pubdate>2012-11-26T00:45:35.960+01:00</time>
			<span itemprop="name">Daniel Hagnoul</span>
			<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
			<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
			<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
			<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
		</footer>
		<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
		<!--https://github.com/jquery/jquery-color-->
		<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
		<script>
			"use strict";
 
			$(function(){
/*
 * Version corrigée pour tenir compte
 * des éléments enfants.
 */
$( document ).on( "click", function( e ){
	if ( $( e.target ).closest( "#search_result" )[0] === undefined ){
	    if ( e.target.id != "search_result" ){
	        $( "#search_result" ).hide();
	    }
	}
});
 
/**********************************/
 
/*
 * Ne fonctionne pas du tout !
 * "#search_result" n'est jamais caché !
 */
/*
$(document).on('click', function(e){
    var $this = $(e.target);
    if(!$this.closest('#search_result')){
        $("#search_result").hide();
    }
});
*/
 
/*********************************/
 
/*
 * Ne fonctionne pas !
 * Si on clique dans l'enfant (span), "#search_result" n'est pas caché,
 * mais si on clique dans le parent ("#search_result") l'élément est caché !
 */
/*
$(document).mouseup(function (e){
    var container = $("#search_result");
    if (container.has(e.target).length === 0)
        container.hide();
});
*/
 
			});
 
			$( window ).load( function(){
 
			});
		</script>
	</body>
</html>

et le petit plug-in jQuery qui va bien avec :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
$.fn.onclickout = function(callback){
    var elm = this;
    $(document).on("click", function(evt){
        if($(evt.target).closest(elm).size() === 0){
            callback.call(elm, evt);
        }
    });
    return elm;
};
 
$("#search_result").onclickout(function(){ this.hide() });

06/12/2012, 21h38
Bovino

Effectivement, j'avais oublié le .length (ou .size()) dans mon exemple... :oops:
08/12/2012, 08h58
CinePhil

J'ai essayé de mettre le code de SylvainPV puis celui de danielhagnoul dans mes balises script mais aucun ne masque la liste de résultats de la recherche quand on clique en dehors de cette liste ! :calim2:

EDIT:
Avec le code de danielhagnoul du message #7, ça fonctionne.
Merci.
08/12/2012, 11h20
danielhagnoul

Citation:

Envoyé par CinePhil

EDIT:
Avec le code de danielhagnoul du message #7, ça fonctionne.
Merci.

Ouf ! :mrgreen:
08/12/2012, 16h49
SylvainPV

On va être obligé de mettre toute une page HTML comme code de réponse pour s'assurer que les gens savent intégrer ce qu'on leur donne :roll:
08/12/2012, 18h16
CinePhil

À question précise, réponse précise.
À réponse imprécise, possiblement mauvaise mise en oeuvre de la réponse donnée et insatisfaction du demandeur.
08/12/2012, 23h19
danielhagnoul

Citation:

Envoyé par SylvainPV

On va être obligé de mettre toute une page HTML comme code de réponse pour s'assurer que les gens savent intégrer ce qu'on leur donne :roll:

Citation:

Envoyé par CinePhil

À question précise, réponse précise.
À réponse imprécise, possiblement mauvaise mise en oeuvre de la réponse donnée et insatisfaction du demandeur.

Qui parlera un jour de la satisfaction du répondeur ? :(

Beaucoup de forumeurs (pas toi Philippe, car tu réponds à des questions sur d'autres sujets) oublient que les gens qui répondent à leurs questions donnent leur temps et leurs travaux gratuitement et que la seule satisfaction qu'ils peuvent en retirer c'est un merci ou un vote en faveur de leur message.
09/12/2012, 01h22
SylvainPV

Désolé si j'ai pu paraître impoli, mais j'ai pris la peine d'écrire ce code et de le tester moi-même pour vérifier son fonctionnement. D'ailleurs, il suffit de prendre la page HTML de daniel et de remplacer le code pour voir qu'il fonctionne très bien : http://jsfiddle.net/QaeRw/

Donc voilà, j'ai voulu faire les choses bien en écrivant un petit plug-in jQuery qui puisse être réutilisé facilement par d'autres, c'est pas pour prendre un "ça marche pas" ensuite sans explications. Que tu prennes le code de Daniel ou le mien, je m'en fiche, mais ne va pas dire que ça ne fonctionne pas alors que le code a été testé en prenant sur mon temps.
09/12/2012, 11h18
CinePhil

Je me suis, moi aussi, un peu emporté au vu de ton message.

Ce qu'il manquait dans ta réponse et dans la réponse #5 de danielhagnoul était ce qui précède et ce qui suit la petite fonction et qui la rendait inopérante toute seule. C'est comme si vous m'aviez donné les clés d'une voiture sans me dire où est garée la voiture sur la parking d'un hyper-marché un samedi après-midi avant Noël ! :calim2:

C'est pour ça qu'il faut être assez précis quand on répond car on ne sait pas quel est le niveau de celui qui pose la question. Mon nombre de messages ne le préjuge en rien puisque l'essentiel de ceux-ci est dans les forums bases de données et ALM. En Javascript, je suis encore un enfant et ce qui semble évident à certains ne l'est pas pour tous.
09/12/2012, 23h41
danielhagnoul

Citation:

Envoyé par CinePhil

[...] C'est comme si vous m'aviez donné les clés d'une voiture sans me dire où est garée la voiture sur la parking d'un hyper-marché un samedi après-midi avant Noël ! :calim2:

:ptdr:

La clé de ta nouvelle voiture de grand luxe est dans les contributions JavaScript : Construction et exemples d'utilisation de l'événement spécial clickOutside.