détecter un clic à l'extérieure d'une div

**Overstone** · 31/08/2007, 14h19

bonjour,

J'aimerais en javascript détecter un clic à l'extérieure d'un div sans utiliser Onblur car mon div contient un champs de saisi et l'action voulu ne doit pas se déclencher si on saisi un texte

L'action (fermer le div) doit se déclencher que si on clic à l'extérieure de celui ci

Je me demande si c'est donc possible de faire sa sans Onblur

**peldaine** · 31/08/2007, 15h10

Je ne sais pas si ca peut marcher-je n'ai jamais fait ca-mais une idée serait de mettre une fonction pour ton evenement "onClick" sur ton document et sur le div, tu lui met pour le meme evenement une fonction qui ne fait rien.

**Overstone** · 31/08/2007, 15h26

Merci mais je pense avoir trouvé, je vais faire un div qui fait la dimension de ma page ou à l'intérieure je vais mettre mon div, comme sa le div transparent qui prend toute ma page pourra avoir comme onclick la fonction que je souhaite

**jypees** · 31/08/2007, 15h46

c'est un truc en mouse :

Code :

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

1
2
3
4
5
 
window.onclick = function()
{
  alert('je suis hors du div :D')
}

mais bon ca marche aussi dedans lol donc c'est pour ca que c'est un truc en mouse ^^ apres si tu veux le code qui permet de faire hors dehors mais pas dedants tu me le dis

**Auteur** · 31/08/2007, 18h40

bonjour,

gère l'événement onclick dans ton div et dans le body :

Code html :

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
29
30
 
<html>
<title></title>
<script type="text/javascript">
function clic(obj)
{
     if (obj.id=="idDiv1" || obj.id=="idDiv2")
        document.getElementById("idOut").innerHTML += " vous avez cliquez dans "+obj.id+" ";
     else
        document.getElementById("idOut").innerHTML += " vous avez cliquez quelque part dans la page...<br>"; 
}
</script>
<body onclick="clic(this)">
 
<div id="idDiv1" onclick="clic(this)" style="border: 1px solid #000000">
ceci est mon 1er div
<input type="text" value="mon texte" />
</div>
 
<br><br>
<div id="idDiv2" onclick="clic(this)" style="border: 1px solid #000000; width: 300px; height: 200px">
ceci est mon 2ème div
<input type="text" value="mon texte" />
</div>
 
 
<br><br><br><br>
<div id="idOut"></div>
</body>
</html>

Si tu cliques dans le div 1 tu as ce message :

vous avez cliquez dans idDiv1 vous avez cliquez quelque part dans la page...

Si tu cliques en dehors d'un div tu as ce message :

vous avez cliquez quelque part dans la page...

Sache que l'événement onclick se déclence d'abord sur le div puis sur le body. Il te faut donc gérer les deux cas.... avec un timer (ici à 20ms) par exemple :

Code html :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<html>
<title></title>
<script type="text/javascript">
<!--
var timer = null;
var objetClic = null;
 
function chrono()
{
   
   timer = null;
   document.getElementById("idOut").innerHTML += " vous avez cliquez dans "+objetClic.id+" ";
}
 
 
function clic(obj)
{
     if ((obj.id=="idDiv1" || obj.id=="idDiv2") && timer==null)
     {
         timer = setTimeout("chrono()","20");
         objetClic  = obj;
     } 
     else
     {
         if (timer==null)
              document.getElementById("idOut").innerHTML += " vous avez cliquez ailleurs dans la page";    
     }
}
//-->
</script>
<body onclick="clic(this)">
 
<div id="idDiv1" onclick="clic(this)" style="border: 1px solid #000000">
ceci est mon 1er div
<input type="text" value="mon texte" />
</div>
 
<br><br>
<div id="idDiv2" onclick="clic(this)" style="border: 1px solid #000000; width: 300px; height: 200px">
ceci est mon 2ème div
<input type="text" value="mon texte" />
</div>
 
 
<br><br><br><br>
<div id="idOut"></div>
</body>
</html>

détecter un clic à l'extérieure d'une div

JavaScript

Discussions similaires

Partager

Partager