Comment faire l'événement passe par élément DOM visible

Question

Ayons ce code:

<div id="outer_container"> 
    <div id="inner_child_1"></div> 
    <div id="inner_child_2"></div> 
</div> 

div#outer_container 
{ 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background-color: green; 
} 

div#inner_child_1 
{ 
    position: absolute; 
    z-index: 1 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: red; 
} 

div#inner_child_2 
{ 
    position: absolute; 
    z-index: 2 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: blue; 
} 

Lorsque nous faisons un clic, par exemple, sur la couche supérieure inner_child_2, l'événement se propage à tous les gestionnaires d'événements enregistrés à inner_child_2 et son parent outer_container. Non à inner_child_1 malgré qu'il se trouve directement sous inner_child_2. C'est par spécification. Tous les navigateurs modernes le font.

Ma question est la suivante:

Comment faire un événement passe par inner_child_2 et atteindre inner_child_1, en plus de faire inner_child_1 pas visible ou modifier son z-index? (Ou transparent, mais cela ne fonctionnera que dans IE8)

Je pensais déclencher moi-même un événement dans un code de gestionnaire enregistré dans inner_child_2. Mais dans le cas d'utilisation réel, je ne sais pas où envoyer l'événement, comme ci-dessous inner_child_2, il y a plusieurs éléments disposés de manière imprévisible et je veux que chacun reçoive des événements comme si inner_child_2 n'était pas là. Idéalement, je veux être en mesure de laisser passer certains événements tout en en empêchant les autres.

Je sais c'est une question difficile, mais je vais apprécier toutes les suggestions

Answer 1

Une façon serait d'adopter une approche ascendante:

Dans le conteneur parent, vous gérez l'événement click, puis parcourez ses enfants et comparez les coordonnées du clic avec les limites relatives de chaque enfant. Si le clic est dans les limites, un clic devrait y avoir été déclenché, donc déclenchez manuellement un événement click sur cet enfant.