Equivalent évènement onblur pour une div

**dominos** · 08/11/2011, 19h22

Bonjour,

Savez-vous comment on peut faire pour obtenir l'équivalent de l'évènement onblur avec une DIV ?

Code :

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

1
2
3
<div type="text" onblur="alert('blur');" >
test
</div>

Merci de votre aide.

**NoSmoking** · 08/11/2011, 19h49

Bonsoir,
difficile de répondre une DIV n'ayant pas prise de focus, essaies avec mouseout.

**Willpower** · 08/11/2011, 19h50

Code :

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
 
var monDiv = document.getElementById('id_de_mon_div');
function my_blur(){
	// ...
}
var monDivIsFocused = false;
monDiv.onclick = function(){monDivIsFocused=true;};
// utiliser addEventListenner et attachEvent au lieu de "onclick" si le code est important et que d'autres événements "onclick" peuvent s'attacher au body
document.body.onclick = function(e){
	var evt = window.event || e; 
	var target = evt.target || evt.srcElement; 
	var clickOnDiv = false;
	while( target && !clickOnDiv){
		if( target.id == monDiv)
			clickOnDiv = true;
		target = target.parentNode;
	}
	if(clickOnDiv && monDivIsFocused){
		monDivIsFocused = false;
		my_blur();
	}
	return true;
};

**dominos** · 09/11/2011, 14h01

Merci pour ce bout de code interressant, j'ai donc testé mais sans résultat

:

Code :

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
<html>
<head>
 
 
<script>
var monDiv = document.getElementById('mondiv');
function my_blur(){
	alert('onblur');
}
var monDivIsFocused = false;
monDiv.onclick = function(){monDivIsFocused=true;};
// utiliser addEventListenner et attachEvent au lieu de "onclick" si le code est important et que d'autres événements "onclick" peuvent s'attacher au body
document.body.onclick = function(e){
	var evt = window.event || e;
	var target = evt.target || evt.srcElement;
	var clickOnDiv = false;
	while( target && !clickOnDiv){
		if( target.id == monDiv)
			clickOnDiv = true;
		target = target.parentNode;
	}
	if(clickOnDiv && monDivIsFocused){
		monDivIsFocused = false;
		my_blur();
	}
	return true;
};
</script>
</head>
 
<body>
 
 
 
<div id="mondiv" style="border: 1px solid red">
test
</div>
 
</body>
</html>

**Bovino** · 09/11/2011, 14h14

testé mais sans résultat

A tout hasard, tu as mis quoi dans la fonction my_blur() ?

**Watilin** · 09/11/2011, 16h31

Envoyé par dominos

Merci pour ce bout de code interressant, j'ai donc testé mais sans résultat

:

Normal, étant donné que tu scriptes avant que ta div soit chargée. Diffère avec un evènement load, ou place ton script après ta div.

@Willpower> Réinventer le focus pour pouvoir réinventer le blur… Astucieux

**amezghal** · 09/11/2011, 17h38

Code :

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

1
2
 
if( target.id == monDiv)

A remplacer par

if(target.id == "id_de_mon_div") // tu fais .id donc tu dois comparer des strings

ou bien

if(target === monDiv) // l'objet est le même

Sinon ça serait de mieux de le faire en jquery, un peu près la même logique, mais gérer les évènements par le model évènementiel jquery pour éviter des problèmes sur d'autre browser, et aussi réduire le code

**Willpower** · 09/11/2011, 17h43

Envoyé par amezghal

Code :

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

1
2
 
if( target.id == monDiv)

A remplacer par

ou bien

Sinon ça serait de mieux de le faire en jquery, un peu près la même logique, mais gérer les évènements par le model évènementiel jquery pour éviter des problèmes sur d'autre browser, et aussi réduire le code

oups, pour le premier j'avais effectivement d'abord proposé une version ou on comparait les id et puis j'ai édité pour remplacer par l'objet directement (en oubliant de modifier un des 2 coté)

pour jquery, ne sachant pas s'il utilisait la librairie j'ai voulu lui proposer une solution en js pur.

edit: "pour éviter des problèmes sur d'autre browser", je pense que le code que j'ai proposé est compatible avec la plupart des browsers.

**dominos** · 09/11/2011, 18h23

Merci pour ces réponses...

En fait ce que je cherche à faire, c'est afficher une div (show/hide) en cliquant depuis un bouton <img>.

Si le clique s'effectue sur un autres endroit de la page, la div ouverte se ferme également.

je développe un composant similaire à un <select> avec des checkbox dedant..., je voudrais que ça réagisse de même façon.

**amezghal** · 09/11/2011, 18h33

Donc tu n'as pas besoin du focus.
tu veux juste hider le conteneur des que tu cliques ailleurs

en jquery

Code :

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

1
2
3
4
5
6
7
8
9
 
//supposant que l'id du conteneur est : "select_container"
var selectContainer = $('#select_container');
$(document.body).click(function(){
   if(selectContainer .has(this).length == 0){
       //le click est en dehors du container; tu le hide
       selectContainer.hide();
   }
})

Il y une autre methode avec stopPropagation (mais pas conseillée)
aussi je pense qu'il y a un plugin jquery "clickout" qui gère ça

**dominos** · 09/11/2011, 19h06

Trouvé sur http://stackoverflow.com/questions/4...kout-in-jquery
mais pour l'instant rien ne fonctionne...

Code :

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

1
2
3
4
5
6
var $box = $('#box'); 
$(document.body).click(function(){ 
    if (!$box.has(this).length) { // if the click was not within $box 
        $box.hide(); 
    } 
});

**NoSmoking** · 09/11/2011, 19h27

Bonjour,
un petit exemple de ce qui devrait te satisfaire

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
html, body {
  height : 100%;
  width : 100%;
}
#la_div {
  width : 100px;
  height : 100px;
  border : 1px solid #e0e0e0;
}
</style>
</head>
<body>
<div id="la_div">Hello World !</div>
<script type="text/javascript">
var oDiv = document.getElementById('la_div');
document.body.onclick = function(e){
  var oElem = e ? e.target : event.srcElement;
  if( oElem !== oDiv){
    oDiv.style.display = 'none'
    alert( 'Y a plus!!!');
  }
}
</script>
</body>
</html>

plugin DVP inside en 7 lignes

Trouvé sur http://stackoverflow.com/questions/4...kout-in-jquery
mais pour l'instant rien ne fonctionne...

on ne peut pas gagner à tous les coups

**dominos** · 09/11/2011, 19h38

merci pour l'exemple je pensais que le code en dehors d'un balise head n'était pas très conventionnel...

**Watilin** · 09/11/2011, 20h14

C'est très juste, et c'est pour ça que je te conseillais d'utiliser un évènement de load

**dominos** · 09/11/2011, 23h35

Bonsoir,

auriez-vous un exemple svp, juste quelques lignes pour me donner une idée,
j'ai plutôt l'impression que pour réaliser ce type de composant faut tout mettre dans un css...

merci d'avance

**Willpower** · 10/11/2011, 00h44

Envoyé par dominos

Bonsoir,

auriez-vous un exemple svp, juste quelques lignes pour me donner une idée,
j'ai plutôt l'impression que pour réaliser ce type de composant faut tout mettre dans un css...

merci d'avance

le code de "noSmoking" ne fonctionne pas ?
ou bien, c'est juste le fait de mettre la balise script après le body qui te gène ?
si c'est cela, tu la places dans le head et tu englobes le contenu du script par:

Code :

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

1
2
3
window.onload = function(){
...
};

**dominos** · 10/11/2011, 14h34

Oui c'est ce que j'ai fait hier soir merci.

**NoSmoking** · 10/11/2011, 21h58

il serait peut être intéressant que tu nous <edit>montres</edit> la construction de ton code.

<edit>cela va faire plaisir à RomainVALERI

</edit>

**dominos** · 10/11/2011, 22h36

dsl, oublié de cocher "résolu",
et merci à vous tous.

Equivalent évènement onblur pour une div

JavaScript

Discussions similaires

Partager

Partager