Wie Javascript verwenden Onclick auf einem DIV-Tag Sichtbarkeit eines Abschnitts zu wechseln, die klickbare Links enthält?

Question

Hallo, ich habe ein DIV Abschnitt bekam, dass zunächst nur der Titel sichtbar ist. Was möchte ich erreichen, ist, dass, wenn die Besucher überall klickt auf dem Bereich von toggle_section der toggle_stuff div wechselt zwischen sichtbar / unsichtbar.

<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>

Allerdings ist die Art und Weise wird Set-up gerade jetzt, wenn ich in dem <a> jeden toggle_section Link habe, auf diesen Link klicken, wird auch das Onclick-Ereignis auszuführen.

Dann ist meine Frage, was der beste Weg sei, diese Art von Verhalten zu setzen?

Answer 1

Die einfachste Lösung ist es, fügt einen zusätzlichen Onclick-Handler auf den Link in Ihrem DIV der Ereignispropagierung stoppt:

<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>

Das obige Beispiel verwendet Prototype Event.stop() Funktion, um eine Cross-Browser-Ereignispropagierung zu erleichtern stoppen.

Wenn Sie den Inline-onclick() Handler verwenden, die meisten (wenn nicht alle) Browser wird das Ereignis in der Bubbling-Phase durchläuft zuerst (das ist, was Sie wollen).

Eine gute Anleitung, die tatsächlichen Gründe für dieses Verhalten zu verstehen und die Unterschiede zwischen Event Capturing und Event sprudelnden kann an den hervorragenden gefunden werden Quirksmode.

Answer 2

in Skript:

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

Aktivator Link, gefolgt von Inhalt (kein Grund, dass auf der Seite nicht anders sein könnte):

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

Ich habe diese von Modal Fenster Javascript CSS-Overlay - hatte für die suchen Quelle und war erfreut, es war diese Seite zu finden. :)

Answer 3

Nachdem ich meine erste Frage gepostet konnte ich nicht einmal mehr zu denken, zu versuchen, warten und es scheint, dass ich eine ganz einfache Art und Weise gefunden habe, dies zu erreichen.

Ich habe die onlick Effect.toggle in eine separate Funktion bewegt wie:

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

Ich nehme an, dies nur für A Tags funktionieren würde und nicht irgendetwas anderes, obwohl klickbare ist.

Answer 4

Ich weiß wirklich nicht, ob das funktionieren würde, aber versuchen, das Verbindungselement einen größeren Wert als die z-index toggle_section div geben.

so etwas wie:

#toggle_section a { z-index: 10; }

Answer 5

Fügen Sie ein Onclick-Handler Ereignispropagierung zu stoppen.

Mit JQuery Verwendung: Onclick = "event.stopPropagation ()"

Mit Prototype Verwendung: Onclick = "Event.stop (event)"