Comment utiliser javascript onclick sur une balise DIV pour activer la visibilité d'une section contenant des liens cliquables?

Question

Bonjour, j’ai une section DIV qui n’a que son titre visible au départ. Ce que j'aimerais réaliser, c'est que lorsque le visiteur clique n'importe où sur la zone toggle_section la toggle_stuff div bascule entre visible et masqué.

<div id="toggle_section" 
     onclick="javascript: new Effect.toggle('toggle_stuff', 'slide');">
    <div id="toggle_title">Some title</div>
    <div id="toggle_stuff">
        some content stuff
        <a href="/foo.php">Some link</a>
    </div>
</div>

Cependant, selon la configuration actuelle, si j'ai un lien <a> dans <<>, cliquer sur ce lien exécutera également l'événement onclick.

Ensuite, ma question est la suivante: quel serait le meilleur moyen de définir ce type de comportement?

Answer 1

La solution la plus simple consiste à ajouter un gestionnaire onclick supplémentaire au lien dans votre DIV, qui arrête la propagation de l'événement:

<div id="toggle_section" 
     onclick="javascript: new Effect.toggle('toggle_stuff', 'slide');">
    <div id="toggle_title">Some title</div>
    <div id="toggle_stuff">
        some content stuff
        <a href="/foo.php"
            onclick="Event.stop(event);"
        >Some link</a>
    </div>
</div>

L'exemple ci-dessus utilise la fonction Event.stop() de Prototype pour faciliter la navigation sur plusieurs navigateurs. arrêt de la propagation des événements.

Lorsque vous utilisez le gestionnaire onclick() intégré, la plupart (sinon la totalité) des navigateurs traversent l’événement dans la phase de propagation (ce que vous souhaitez).

Vous trouverez un excellent guide pour comprendre les raisons réelles de ce comportement et les différences entre la capture d'événements et les événements dans l'excellent Quirksmode.

Answer 2

dans le script:

function overlayvis(blck) {
  el = document.getElementById(blck.id);
  el.style.visibility = (el.style.visibility == 'visible') ? 'hidden' : 'visible';
}

lien activateur, suivi du contenu (aucune raison qui ne pourrait figurer sur la page):

<div onclick='overlayvis(showhideme)">show/hide stuff</div>
<div id="showhideme">
  ... content to hide / unhide ...
</div>

Je l’ai obtenue de la fenêtre modale superposée en javascript css - devait rechercher le source et était heureux de constater que c’était ce site. :)

Answer 3

Après avoir posté ma première question, je ne pouvais plus attendre pour essayer d'y réfléchir une nouvelle fois et il semble que j'ai trouvé un moyen assez simple d'y parvenir.

J'ai déplacé onlick Effect.toggle dans une fonction distincte telle que:

function someClick(event) {
    if (event.target.nodeName == 'A') {
        return;
    } else {
        new Effect.toggle('toggle_stuff', 'slide');
    }
}

Je suppose que cela ne fonctionnerait que pour A balises et pas pour tout ce qui est cliquable.

Answer 4

Je ne sais pas vraiment si cela fonctionnerait, mais essayez de donner à l'élément link une valeur z-index supérieure à celle de la division toggle_section.

quelque chose comme:

#toggle_section a { z-index: 10; }

Answer 5

Ajoutez un gestionnaire onclick pour arrêter la propagation d'événements.

Avec JQuery, utilisez: onclick = " event.stopPropagation () "

Avec utilisation de prototype: onclick = & "Event.stop (event) &";