OnMouseOut sur un div

**krfa1** · 14/02/2006, 11h06

Bonjour,

J'ai un petit soucis. J'ai deux div. Un de 200 * 200, et un de 100 * 100. Celui de 100 * 100 et pile au milieu du 200 * 200.

Quand la souris sors du div 200 * 200, j'ai une fonction qui s'exécute. Et mais quand je vais sur l'autre div 100 * 100, il me fait la fonction de sortie. Je me suis dit que c'était un peu normal. Alors j'ai changer le OnMousOut en OnMouseMove, et j'ai remarqué que même quand je suis sur le div 100 * 100, le code s'éxécuter. Mais il devrait pas car je suis sur le 100 * 100 mais pas sur le 200 * 200.

Voici mon code.

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
<html>
<head>
<title>Essai</title>
</head>
<body>
<div OnMouseMove="javascript : alert('il est dessus');" style="background-color : red; width : 200px; height : 200px; top : 0px; left : 0px; position : absolute;">
<div style="position : absolute; background-color : yellow; top : 100px; left : 50px; width : 100px;">
<table>
	<tr>
	<td>
	coucou
	</td>
	</tr>
</table>
</div>
</div>
<script type="text/javascript">
<!--
</script>
</body>
</html>

Merci d'avance

Bye

**denisC** · 14/02/2006, 11h15

Pour quel navigateur? IE ou Firefox ou les deux?

Les evenements sont assez différents dans les deux. Pour info, ce que tu expérience s'appelle généralement le bubbling. L'évenement prends place sur la div interne, mais est remonté à tous les containers parents.

**krfa1** · 14/02/2006, 11h19

Ca serait pour les deux. Mais je commence d'abord pour IE.

Et comment puis-je contrer ce problème?

**denisC** · 14/02/2006, 11h30

Envoyé par krfa1

Et comment puis-je contrer ce problème?

Dans IE, il te faudra faire:

Code :

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

1
2
3
4
5
6
 
function annuleEvent() {
  window.event.cancelBubble = true;
  window.event.returnValue = false;
  return false;
}

Et dans ton code HTML:

Code :

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

1
2
3
4
 
<div onmousemove="alert('il est dessus');" style="background-color : red; width : 200px; height : 200px; top : 0px; left : 0px; position : absolute;"> 
<div onmousemove="return annuleEvent()" style="position : absolute; background-color : yellow; top : 100px; left : 50px; width : 100px;">
...

à tester, mais normalement ça devrait le faire (dans IE)

OnMouseOut sur un div

JavaScript

Discussions similaires

Partager

Partager