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.

Equivalent évènement onblur pour une div

JavaScript

Vue hybride

Discussions similaires

Partager

Partager