Inner div von äußeren div onclick betroffen - javascript, jquery, html

Problem:
Ein Klick auf das innere Div löst das onClick-Ereignis des äußeren Div aus. In diesem Fall wird die Sichtbarkeit des Äußeren umgeschaltet <div>, innere <div> und das <p> Element.

Was ich versucht habe:
Einstellen der z-index höher auf der inneren Div als die äußere Div. Keine Wirkung.

HTML:

<div id="messageForm" onClick=toggleMessageForm() >
<div class="innerBox">

<p>Hi!</p>

</div>
</div>

JS:

function toggleMessageForm(){
$("#messageForm").toggle();
}

Hinweis: Der Grund, warum ich toggle () anstelle von show () verwende, ist, dass ich beim ersten Anzeigen des Formulars von einer Schaltfläche auf der ursprünglichen Webseite dieselbe Funktion verwende.

Antworten:

2 für die Antwort № 1

Entferne das onClick Attribut vollständig, und schließen Sie stattdessen den Handler mit jQuery:

$("#messageForm").click(function(evt) {
evt.stopPropagation();
toggleMessageForm();
});

Setzen Sie das in ein script Element weiter unten im HTML als das div (oder wickeln Sie es in a ready Handler).

evt.stopPropagation Bricht das Sprudeln (stoppt die Ausbreitung) des Klickereignisses ab, sodass es die übergeordnete Div. nicht erreicht.

Wenn Sie wirklich, wirklich wollen, halten Sie die onClick Attribut, können Sie dies stattdessen tun:

<div id="messageForm" onClick="toggleMessageForm(event);">

... und dann rein toggleMessageForm:

function toggleMessageForm(evt){
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
$("#messageForm").toggle();
}

... aber da Sie jQuery bereits verwenden, wäre das ungewöhnlich.

---

0 für die Antwort № 2

Benutzen stopPropagierung();

function toggleMessageForm(e){
e.stopPropagation();
$("#messageForm").toggle();
}

e.stopPropagation ();

Verhindert, dass das Ereignis den DOM-Baum sprudelt übergeordnete Handler werden nicht über das Ereignis informiert.

---

0 für die Antwort № 3

Wenn Sie eine oder mehrere jQuery-Klickfunktionen für das äußere und innere Div haben und Sie möchten, dass nur eine von ihnen (zum Beispiel das äußere Div) verwendet wird stopImmediatePropagation Funktion von jQuery:

$("#messageForm").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$("#messageForm").toggle();
});

---