OnMouseOver() sur un contenu de div

**Anduriel** · 06/07/2012, 12h20

Bonjour,

Voici la page que j'ai:

Code :

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

1
2
3
4
5
<div id="parent" OnMouseOver="up()" OnMouseOut="down()">
   <div id="enfant">
      <a>Lien</a>
   </div>
</div>

Le problème, c'est que le OnMouseOut s'execute lorsque la souris passe sur enfant ou <a>. Il y a bien transition, mais on reste sur le parent au final?

D'où mon problème: comment ne pas executer down() lorsque je reste sur parent?

Merci

**EIN-LESER** · 06/07/2012, 13h04

Je ne suis pas sur que tu puisse en fait car même si il s'agit d'une div enfant elle n'en est pas moins considéré comme une div a part entière.

**Anduriel** · 06/07/2012, 13h25

Dans ce cas existe-t-il une solution de contournement?

**Bovino** · 06/07/2012, 13h26

Code :

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

1
2
3
4
5
6
7
function down(event){
    var element = event.target ? event.target : event.srcElement;
    if(element.id != 'parent'){
        return false;
    }
    console.log('Sortie de "parent"');
}

**SpaceFrog** · 06/07/2012, 13h38

le camelCase n'est plus d'actualité sur les évènements:

OnMouseOver => onmouseover

**Bovino** · 06/07/2012, 13h47

Bon, après tests, la solution est un peu plus complexe...

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
41
42
43
44
45
46
47
48
49
50
51
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>mouseout</title>
	<style>
		#parent{
			margin: 25px;
			width: 600px;
			height: 400px;
			background-color: gold;
		}
		#enfant{
			background-color: silver;
			width: 300px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div id="parent">
	   <div id="enfant">
		  <a>Lien</a>
	   </div>
	</div>
	<script>
	document.getElementById('parent').onmouseout = down;
	document.getElementById('parent').onmouseover = up;
		function down(event){
			var element = event.relatedTarget ? event.relatedTarget : event.fromElement;
			while(element){
				if(element.id == 'parent'){
					return false;
				}
				element = element.parentNode;
			}
			console.log('Sortie de "parent"');
		}
		function up(event){
			var element = event.relatedTarget ? event.relatedTarget : event.toElement;
			while(element){
				if(element.id == 'parent'){
					return false;
				}
				element = element.parentNode;
			}
			console.log('Entrée dans "parent"');
		}
	</script>
</body>
</html>

**Anduriel** · 06/07/2012, 16h46

Merci pour cette proposition, en fait je tourne autour depuis une bonne heure...
Le problème que j'ai je vois c'est que pour down() (donc au onmouseout) tu prendre fromElement mais il faudrait prendre toElement? (http://api.jquery.com/event.relatedTarget/)

Je vais essayer en permutant je vous tiens au courant.
Merci

OnMouseOver() sur un contenu de div

JavaScript

Vue hybride

Discussions similaires

Partager

Partager