Equivalent évènement onblur pour une div [Résolu]

dominos · 08/11/2011, 18h22

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, 18h49

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

Willpower · 08/11/2011, 18h50

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, 13h01

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, 13h14

Citation:

testé mais sans résultat

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

Watilin · 09/11/2011, 15h31

Citation:

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, 16h38

Code :

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

1
2
 
if( target.id == monDiv)

A remplacer par

Citation:

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

ou bien

Citation:

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, 16h43

Citation:

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, 17h23

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, 17h33

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, 18h06

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, 18h27

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

Citation:

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, 18h38

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, 19h14

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, 22h35

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 · 09/11/2011, 23h44

Citation:

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, 13h34

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

NoSmoking · 10/11/2011, 20h58

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, 21h36

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

09/11/2011, 19h14	#14
Watilin Membre Expert Matilin Torre Étudiant Inscription : juin 2010 Messages : 679 Détails du profil Informations personnelles : Nom : Matilin Torre Âge : 23 Localisation : France, Ille et Vilaine (Bretagne) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juin 2010 Messages : 679 Points : 1 202 Points : 1 202	C'est très juste, et c'est pour ça que je te conseillais d'utiliser un évènement de load __________________ Disposition de clavier ergonomique française : Bépo
	00

08/11/2011, 18h49	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonsoir, difficile de répondre une DIV n'ayant pas prise de focus, essaies avec mouseout.
	00

09/11/2011, 17h23	#9
dominos Membre régulier Inscription : février 2009 Messages : 197 Détails du profil Informations forums : Inscription : février 2009 Messages : 197 Points : 71 Points : 71	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.
	00

09/11/2011, 18h38	#13
dominos Membre régulier Inscription : février 2009 Messages : 197 Détails du profil Informations forums : Inscription : février 2009 Messages : 197 Points : 71 Points : 71	merci pour l'exemple je pensais que le code en dehors d'un balise head n'était pas très conventionnel...
	00

09/11/2011, 22h35	#15
dominos Membre régulier Inscription : février 2009 Messages : 197 Détails du profil Informations forums : Inscription : février 2009 Messages : 197 Points : 71 Points : 71	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
	00

10/11/2011, 13h34	#17
dominos Membre régulier Inscription : février 2009 Messages : 197 Détails du profil Informations forums : Inscription : février 2009 Messages : 197 Points : 71 Points : 71	Oui c'est ce que j'ai fait hier soir merci.
	00

10/11/2011, 20h58	#18
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	il serait peut être intéressant que tu nous <edit>montres</edit> la construction de ton code. <edit>cela va faire plaisir à RomainVALERI </edit>
	00

10/11/2011, 21h36	#19
dominos Membre régulier Inscription : février 2009 Messages : 197 Détails du profil Informations forums : Inscription : février 2009 Messages : 197 Points : 71 Points : 71	dsl, oublié de cocher "résolu", et merci à vous tous.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email