OnMouseOver() sur un contenu de div

Version imprimable

06/07/2012, 12h20
Anduriel

OnMouseOver() sur un contenu de div
Bonjour,

Voici la page que j'ai:
Code:

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
06/07/2012, 13h04
EIN-LESER

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.
06/07/2012, 13h25
Anduriel

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

Code:

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"');
}

06/07/2012, 13h38
SpaceFrog

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

OnMouseOver => onmouseover

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

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

06/07/2012, 16h46
Anduriel

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
06/07/2012, 16h52
Anduriel

Edit: Ça fonctionne très bien si la souris provient de gauche / droite / haut, mais c'est assez étrange, si j'arrive par le dessous du div, l'entrée n'est pas remarquée; il pense que le parent est bien "parent"...
07/07/2012, 15h32
Auteur

bonjour,

voici un petit peu de lecture et des exemples de scripts :
http://www.developpez.net/forums/d59...nts-imbriques/
http://www.developpez.net/forums/d64...s/#post3796746
http://www.developpez.net/forums/d57...circuiter-1-a/

:D

Ces discussions datent un peu, mais je constate que le problème est toujours d'actualité.
14/07/2012, 10h48
Anduriel

Bonjour et merci, j'ai finalement résolu le problème du bas en réordonnant mes div, car en venant du bas je venais d'un div parent "correct", erreur bête...

Merci!