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.

12/05/2011, 18h33	#1
Mr Meuble Futur Membre du Club Jérôme Ingénieur développement logiciels Inscription : mars 2004 Messages : 44 Détails du profil Informations personnelles : Nom : Jérôme Âge : 26 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : mars 2004 Messages : 44 Points : 16 Points : 16	Rendre un élément transparent par les événements 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
	00

13/05/2011, 21h55	#2
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	je crois qu'avec le "onmouseenter" tu devrais pouvoir faire ce que tu veux.
	00

16/05/2011, 10h46	#4
Mr Meuble Futur Membre du Club Jérôme Ingénieur développement logiciels Inscription : mars 2004 Messages : 44 Détails du profil Informations personnelles : Nom : Jérôme Âge : 26 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : mars 2004 Messages : 44 Points : 16 Points : 16	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.
	00

16/05/2011, 14h25	#5
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 933 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 933 Points : 4 756 Points : 4 756	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...
	00

16/05/2011, 17h27	#6
Mr Meuble Futur Membre du Club Jérôme Ingénieur développement logiciels Inscription : mars 2004 Messages : 44 Détails du profil Informations personnelles : Nom : Jérôme Âge : 26 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : mars 2004 Messages : 44 Points : 16 Points : 16	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email