Bug IE7 IE8 position fixed et onclick
Bonjour,
Je suis tombé sur un bug surprenant concernant la gestion des évènements
sur Internet Explorer 7 et 8
Et j'aimerai bien savoir si quelqu'un a une explication rationnelle :-)
Je pose un overlay qui occupe toute la page en position fixed
top: 0; left: 0; bottom: 0; right: 0;
Je gère le onclick dessus et aussi sur certains éléments de ma page.
Sur tous les navigateurs excepté IE le overlay en position fixed gère
le click et les autres éléments ne le voie pas.
Sur IE, c'est le onclick de la div #dessous qui est traité, mais uniquement
quand on click sur le texte (alors qu'on pourrait s'attendre à une gestion du
click sur toute la div)
Partout ailleur sur la page, c'est bien le onclick de l'overlay qui est traité.
Ce n'est pas une question de remontée des évènement (bubbling) puisque
l'overlay n'est pas enfant du div #dessous (ça change rien au problème de
tenter de faire un preventDefault ou stopPropagation ou return false sur le
gestionnaire d'évènement)
Voici un code pour tester. Vous pouvez contourner le bug en appliquant
une couleur de fond et une transparence (marche aussi avec une image
de fond transparente). Pour cela décommentez dans le css.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
#dessous { background-color: #ff0; }
#overlay {
position: fixed; top: 0; left: 0; bottom: 0; right: 0;
/* background: #000; opacity: 0; filter: alpha(opacity = 0); */
}
</style>
</head>
<body>
<div id='dessous' onclick='alert("dessous")'>Dessous</div>
<div id='overlay' onclick='alert("overlay")'></div>
</body>
</html> |
