Equivalent évènement onblur pour une div

Version imprimable

08/11/2011, 18h22
dominos

Equivalent évènement onblur pour une div
Bonjour,

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

1 2 3 <div type="text" onblur="alert('blur');" > test </div>
Merci de votre aide.
08/11/2011, 18h49
NoSmoking

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

Code:

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;
};

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

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

09/11/2011, 13h14
Bovino

Citation:

testé mais sans résultat

:roll:

A tout hasard, tu as mis quoi dans la fonction my_blur() ?
09/11/2011, 15h31
Watilin

Citation:

Envoyé par dominos

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

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. :roll:

@Willpower> Réinventer le focus pour pouvoir réinventer le blur… Astucieux :)
09/11/2011, 16h38
amezghal
Code:

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
09/11/2011, 16h43
Willpower
Citation:
Envoyé par amezghal

Code:

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é) :oops:

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.
09/11/2011, 17h23
dominos

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.

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

en jquery
Code:

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

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

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(); } });

Bonjour,
un petit exemple de ce qui devrait te satisfaire

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
<!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 ;)

09/11/2011, 18h38
dominos

merci pour l'exemple je pensais que le code en dehors d'un balise head n'était pas très conventionnel...
09/11/2011, 19h14
Watilin

C'est très juste, et c'est pour ça que je te conseillais d'utiliser un évènement de load ;)
09/11/2011, 22h35
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
09/11/2011, 23h44
Willpower
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:

1 2 3 window.onload = function(){ ... };
10/11/2011, 13h34
dominos

Oui c'est ce que j'ai fait hier soir merci.
10/11/2011, 20h58
NoSmoking

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

<edit>cela va faire plaisir à RomainVALERI :lol:</edit>
10/11/2011, 21h36
dominos

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