Discussion :

[CinePhil]

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.

[lightbulb]

Du vu et revu en jQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[CinePhil]

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 PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

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">&nbsp;</div>
		</div><!-- Fin zone_search -->

La div de résultat est, comme son nom l'indique : <div id="search_result">&nbsp;</div>

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[danielhagnoul]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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()