Comment empêcher un élément enfant d'être actif à un Evènement parent ?

Version imprimable

Bonjour à tous,

tout est dans la question...

J"ai la structure suivante :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="sub_list">
  <!-- Subs come here ! -->
  <ul id="sub1">
    <li class="timeStart" id="start1"><span
class="time_value">0:00:04,978</span>
      <ul class="time_tools_action">
        <li title="Enlever 100 ms" class="sub_time">-</li>
        <li title="Ajouter 100 ms" class="add_time">+</li>
      </ul>
    </li>
    <li class="timeEnd" id="end1"><span
class="time_value">0:00:05,321</span>
      <ul class="time_tools_action">
        <li title="Enlever 100 ms" class="sub_time">-</li>
        <li title="Ajouter 100 ms" class="add_time">+</li>
      </ul>
    </li>
    <li class="text" id="text1"> zdzd</li>
  </ul>
</div>

Si j'ajoute un événement onMouseEnter sur mon ul.time_tools_action, comment puis je empêcher les enfants .sub_time et .add_time d'être actif à cet événement ?

Merci :)

19/06/2009, 08h13
SpaceFrog

cancelBubble et StopPropagation ?
19/06/2009, 08h47
le_chomeur

https://developer.mozilla.org/en/Gec...nt_Propagation :aie: le sujet récurant bien chiant ( dans le sens ou tous les navigateurs se comportent différemment ...)
19/06/2009, 12h42
vikti

Le problème c'est qu'il ne s'agit pas de propagation d'événement. Mais de "sensibillité" à cet événement. C'est à dire que Si le parent à un MouseOver les enfants en hérite directement.

C'est donc à la création du MouseOver qu'il faut intervenir, pour empecher les enfants de répondre à cet événement.

Rien n'a apparement été prévu à cet effet. Je viens de résoudre mon problème ce matin par une structure de mon code différent : Si un enfant est appelé je modifie le event.target pour dire que c'est le parent qui a été appelé....
Mais je trouve ça mal conçu quand même.
19/06/2009, 13h05
Bovino
Salut.
Si il s'agit bien de la propagation de l'événement :?
Et la complexité de la solution réside, comme il t'a déjà été dit, que les navigateurs ne propagent pas les événements de la même manière.
Pour essayer de faire simple, il existe deux façons successives de propager un événement :
- La capture : l'événement se propage de l'élément le plus haut dans l'arborescence du DOM qui soit concerné par l'événement vers le plus bas.
- Le bouillonnement : c'est le contraire.
Là ou ça devient complexe, c'est de savoir l'ordre dans lequel cette propagation se fait (de mémoire, mais je peux me tromper, IE bouillonne puis capture alors que FF capture puis bouillonne) et dans quelle phase tu peux capturer et stopper la propagation (au bouillonnement pour IE : cancelBubble ; à la capture pour FF : stopPropagation).

Enfin :

Citation:

Mais je trouve ça mal conçu quand même.

Ce n'est pas parce que ça ne convient pas à tes besoins que c'est mal conçu ;)
Imagine toi que d'autres (voire toi sur un autre code) peuvent avoir d'autres besoins et que ce modèle est conçu pour donner des solutions au plus grand nombre ! Quitte à ce que cela complique la conception.
19/06/2009, 13h44
vikti

Merci de tes explications :) C'est pas évident les écouteurs :aie:

Ça veut donc dire que des que l'on attache un écouteur d'événement, celui ci va écouter le nœud courant mais aussi tous les enfants?

(C'est là ou je me dis, que pour simplifié les codes, il y aurait pu avoir un param supplémentaire pour dire que l'on ne veut écouter que le nœud courant ou écouter toute la branche )
19/06/2009, 13h52
le_chomeur

tu as le second paramètre ( true ou false ) qui te permet justement d'écouter les enfants ou non :) ( regarde la doc du lien cité plus haut )
19/06/2009, 22h27
vikti

Tu parles bien du troisième paramètre de addEventListener ?
Si oui, je n'ai pas vu de changement. L'event.target peut toujours être un enfant.

J'ai bien fait ce que tu me proposais :oops: ?