[Résolu] Div imbriquées cliquables

Bonjour à tous.

Je viens vers vous, suite à mes recherches sur le net afin de résoudre un petit problème que j'ai.
Voilà je suis débutant pour le développement web et j'aimerai réaliser des div imbriquées qui sont cliquables.

<div id ="parent" onclick="location.href='http://www.site1.fr'" style="cursor: pointer;">
    <div id="fils" onclick="location.href='http://www.site2.fr'" style="cursor: pointer;">
    </div>
</div>

Le problème c'est que quand je clic sur le fils, ça me renvoie sur le lien du parent.
J'espère que vous avez compris ma demande.

Merci d'avance.
Modifié par stefen59 (25 Jun 2014 - 10:16)

Bonjour,

1- Pourquoi ne pas utiliser des liens dont c'est le rôle ?
2- Pourquoi vouloir les imbriquer, quel est le but ?
3- JavaScript et CSS dans des fichiers dédiés (séparation du fond et de la forme...), ce n'est pas mal non plus

Merci de répondre si rapidement d'abord.

Pour répondre à pourquoi les imbriquer:

Mon but est de faire comme cela:


Pour répondre aux liens, c'est que je pensais que cela soit plus pratique avec des div. Ce n'est pas le cas?

Pour le javascript, je ne connais pas grand chose, mais cela ne me dérange pas d'apprendre si on me guide un peu, car à force de voir des morceaux de codes je suis un peu perdu.

Merci en tout cas de ton aide.

Je viens de créer ceci :

<div id="parent" onclick="location.href='http://www.site1.fr'" style="cursor: pointer;">
        <p id="parag_1"> bla bla </p>
        <a href="http://www.site2.fr" class="boiteFils1"> bla bla 2 </a>
        <a href="http://www.site3.fr" class="boiteFils2"> bla bla 3 </a>
</div>

Je dois cependant réaliser sur 3 niveaux d'imbrications, avant cela ne fonctionner pas sur deux maintenant si, donc je tente le troisième. Si je trouve la solution, je la posterai, cela peut servir pour d'autres personnes.

Bonjour stefen59,

Vous êtes en plein dans la propagation des événements. Un article a été fait sur le sujet sur Alsacréations http://www.alsacreations.com/article/lire/578-La-gestion-des-evenements-en-JavaScript.html.

Il y aurait bien une solution, par exemple, avec la fonction event.stopPropagation() de la librairie jQuery :

<div id="parent" data-href="http://www.parent.com">
    <div id="child-1" data-href="http://www.child-1.com"></div>
    <div id="child-2" data-href="http://www.child-2.com"></div>
</div>

#parent {
    background: #dadada;
    padding: 20px;
}

#child-1,
#child-2 {
    background: #9a9a9a;
    margin: 20px auto;
    width: 50%;
    height: 100px;
}

jQuery(function($){
    $("#parent, #child-1, #child-2").click(function(e){
        e.stopPropagation();
        var href = $(this).attr("data-href");
        alert(href);
        // window.location.href = href;
    });
});

Exemple en ligne http://codepen.io/guiwint/pen/Jvlxt

Par contre je reste septique sur la pertinence de votre choix technique, tant au niveau ergonomique que sémantique ...

Bonne continuation et bon code...

Bonjour Guiwint,

Je vous remercie pour votre réponse.
Au niveau du visuel, aucune liberté ne m'a été laissé je dois seulement adapter le visuel réalisé par un infographiste en code html, css, ...

J'ai cependant trouvé une solution plus simple, j'ai choisi de demander à l'infographiste l'image qu'il avait réalisé, où il y a des div imbriqués à 3 niveaux, et je l'ai mapper.

Je vous remercie pour votre réponse, je marque comme résolu ce sujet.

Si quelqu'un a le même problème que j'avais soit il passe par la réponse de Guiwint, ou par une image qui suffira ensuite de mapper.

Merci à tous.