Rendre un élément transparent par les événements

**Mr Meuble** · 12/05/2011, 18h33

Bonjour,

Mon titre n'est pas très clair donc petite explication.

J'ai deux div : A et B.
A a des événements souris quelconque (click, mouseover, ...)
B n'a pas d'événement.
A est sous B.
Problème : B empêche les événement de A vu qu'il le recouvre.

Donc ma question est : Est-il possible de faire en sorte que B ne capte pas les événement? J'ai cherché mais n'ai pas trouvé grand chose.

Merci

**ornitho13** · 13/05/2011, 21h55

je crois qu'avec le "onmouseenter" tu devrais pouvoir faire ce que tu veux.

**NoSmoking** · 13/05/2011, 23h15

Bonsoir,
il te suffit de ne pas le mettre sous l'autre...Non?

Trêve de plaisanterie...

Si l'élément B masque entièrement l'élément A l'élément A ne recevra jamais d'événement

Si l'élément B masque partiellement l'élément A l'élément A pourra recevoir les événements

Maintenant si tu encapsules tes 2 éléments dans un autre et que tu places le gestionnaire d'événements sur celui ci, il les recevra systématiquement.
Il te suffit dans ce cas de les réaffecter à l'élément A.

exemple

Code html :

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Test]</title>
<style type="text/css">
#MAIN {
  position : relative;
}
#MAIN div {
  position : absolute;
  display : block;
  border : 1px solid black;
}
#A {
  width : 200px;
  height : 200px;
  background-color : #f0e0e0;
}
#B {
  width : 100px;
  height : 100px;
  background-color : #e0e0f0;
}
</style>
</head>
<body>
<div id="MAIN">
  <div id="A">DIV "A"</div>
  <div id="B">DIV "B"</div>
</div>
<script type="text/javascript">
document.getElementById('MAIN').onclick = function(e){
  e = e ? e : event;
  var oElem = e.target || e.srcElement;
  alert( oElem.id);
}
</script>
</body>
</html>

**Mr Meuble** · 16/05/2011, 10h46

Le problème, c'est que je ne peux pas trop encapsuler les éléments dans un div. En fait je bosse avec l'api google Maps. Sur la carte je place des marker (GMarker) pour indiquer qu'il y a des choses sur la carte. Ensuite pour afficher d'autres infos sur ces choses, j'ai créé une classe qui hérite de GOverlay pour placer sur les marker de petits icônes ou des infos (un peu comme dans éclipse quand il y a un warning ou une erreur sur un fichier).
Ce qu'il y a, c'est que google gère plein d'événement sur un GMarker mais pas sur les GOverlay du coup si je place 2-3 icones dessus, le marker n'a plus beaucoup de zones visibles pour passer la souris.

Je me doutais biens qu'il n'y avait pas trop de solution à mon problème

. Je vais essayer de me débrouiller en plaçant des événements aussi sur les overlay.

**NoSmoking** · 16/05/2011, 14h25

je vois que tu utilises la version 2x de google map, c'est la moment ou jamais de passer à la version 3, pas plus de possibilité, quoiqu'en cherchant bien, mais elle sera maintenable...

**Mr Meuble** · 16/05/2011, 17h27

En effet, j'utilise la V2, j'ai vu il n'y a pas longtemps qu'elle est passée en deprecated.

Pour mon problème, j'ai ajouté les événement souris du marker sur les overlay qui sont par dessus. Ça ne me plait pas des masses mais bon, pas trop le choix.

Merci pour les réponses.

Rendre un élément transparent par les événements

JavaScript

Discussions similaires

Partager

Partager