Manchmal müssen wir dasselbe Ereignis zu verschachtelten HTML-Elementen hinzufügen. Wir haben zum Beispiel zwei Divs, eines ist das übergeordnete Div und das andere ist das untergeordnete Div. Jetzt müssen wir Onclick-Ereignisse für übergeordnete und untergeordnete Divs hinzufügen und verschiedene Funktionen ausführen, wenn der Benutzer auf übergeordnete und untergeordnete Divs klickt. In diesem Fall wird das Ereignis immer auf den übergeordneten und untergeordneten Divs ausgeführt.
Lassen Sie uns anhand des folgenden Beispiels sehen, wie das gleiche Ereignis für verschachtelte HTML-Elemente ausgeführt wird.
Beispiel
Im Beispiel unten haben wir zwei Divs erstellt. Wir haben dem äußeren Div den Klassennamen „parent-div“ und dem inneren Div den Klassennamen „child-div“ gegeben.
Darüber hinaus haben wir auch ein Onclick-Ereignis hinzugefügt, um verschiedene Funktionen für die beiden div-Elemente auszuführen. Wenn der Benutzer auf das innere Div klickt, wird das Klickereignis auch im übergeordneten Div ausgelöst.
<html>
<head>
<style>
.parent-div {
width: 300px;
height: 150px;
margin: 50px;
padding: 10px;
background-color: lightblue;
}
.child-div {
width: 100px;
height: 70px;
margin: 30px;
padding: 10px;
background-color: lightgreen;
}
</style>
</head>
<body>
<h3>Adding the same events <i> to nested HTML elements </i> in JavaScript</h3>
<p>Click on the below parent & child DIVs to see the result</p>
<div class = "parent-div" onclick = "executeParent()"> Parent DIV
<div class = "child-div" onclick = "executeChild()"> Child DIV </div>
</div>
<div id="content"> </div>
<script>
let content = document.getElementById("content");
function executeParent() {
content.innerHTML += "Parent div clicked <br>";
}
function executeChild() {
content.innerHTML += "Child div clicked <br>";
}
</script>
</body>
</html>
Nach dem Login kopieren
Wir müssen Ereignisse verwenden, um die oben genannten Probleme zu lösen, z. B. das Klicken auf ein untergeordnetes Div und das Aufrufen der Methode click event.stopPropogation() des übergeordneten Div.
Grammatik
Benutzer können die Methode stopPropgation() gemäß der folgenden Syntax verwenden, um die Weitergabe von Ereignissen an das übergeordnete Element zu stoppen.
Event.stopPropogation();
Nach dem Login kopieren
Beispiel
Im folgenden Beispiel haben wir Text in das HTML-Tag
und Text in das Onclick-Ereignis eingefügt, das die FunktionexecuteP() ausführt. Zusätzlich haben wir ein
-Tag innerhalb des -Tags hinzugefügt und ein „onclick“-Ereignis im Span-Tag hinzugefügt, das die FunktionexecuteSpan() ausführt.
Darüber hinaus haben wir die Methode event.stoPropogation() mit dem onclick-Ereignis des -Elements verwendet, um die Weitergabe von Ereignissen auf dem -Tag zu stoppen, wenn der Benutzer auf klickt.
In der Ausgabe kann der Benutzer beobachten, dass beim Klicken auf den Text des -Elements nur die Funktion „executeSpan()“ ausgeführt wird.
<html>
<body>
<h3>Adding the same events <i> to nested HTML elements and using the event.stopPropogation() method </i> in JavaScript </h3>
<p style = "cursor: pointer;" onclick="executeP()"> Hello users! How are you? <span Onclick = "event.stopPropagation(); executeSpan();"> Child Span </span> </p>
<div id = "content"> </div>
<script>
let content = document.getElementById("content");
function executeP() {
content.innerHTML += "Clicked on the p element. <br>";
}
function executeSpan() {
content.innerHTML += "Clicked on the Span element! <br>";
}
</script>
</body>
</html>
Nach dem Login kopieren
Beispiel
Im folgenden Beispiel haben wir mithilfe von HTML-Markup eine Hierarchie aus drei verschachtelten Elementen erstellt. Wir haben für jedes Element ein Onclick-Ereignis hinzugefügt. Wenn wir die Methode event.stopPropogation() nicht verwenden, führt sie immer die Funktion firstDivClick() aus.
Um dieses Problem zu lösen, übergeben wir die Ereignisse beim Aufruf als Parameter der Funktion und verwenden die Methode stopPropogation() innerhalb der Funktion.
Der Benutzer kann beobachten, dass beim Klicken auf den Menütext nur die Funktion kebabMenuClick() ausgeführt wird. Wenn der Benutzer auf das zweite Div klickt, führt er einfach die Funktion „secondaryDivClick()“ aus.
<html>
<head>
<style>
.card-1 {
width: 300px;
height: 200px;
background-color: red;
cursor: pointer;
}
.card-2 {
width: 200px;
height: 150px;
background-color: blue;
cursor: pointer;
}
.kebab-menu {
font-size: 1.2rem;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Adding the same events <i> to nested HTML elements and using the event.stopPropogation() method </i> in JavaScript </h3>
<div class = "card-1" onclick = "firstDivClick(event)">
<div class = "card-2" onclick = "secondDivClick(event)">
<div class = "kebab-menu" onclick = "kebabMenuClick(event)"> Menu </div>
</div>
</div>
<div id = "content"> </div>
<script>
let content = document.getElementById("content");
function firstDivClick(event) {
content.innerHTML += "first div clicked <br>";
}
function secondDivClick(event) {
event.stopPropagation();
content.innerHTML += "second div clicked <br>";
}
function kebabMenuClick(event) {
event.stopPropagation();
content.innerHTML += "kebab menu clicked <br>";
}
</script>
</body>
</html>
Nach dem Login kopieren
Benutzer haben gelernt, die Methode event.stopPorpogation() für Ereignisse zu verwenden. Im Wesentlichen wird es verwendet, um zu verhindern, dass Ereignisse auf das übergeordnete Element übertragen werden. Wenn dasselbe Ereignis ein Eltern-Kind-Element auslöst, können wir auf diese Weise unterschiedliche Funktionen für alle Kinderelemente ausführen.
Das obige ist der detaillierte Inhalt vonWie kann ich die Ereignisweitergabe mithilfe des Inline-OnClick-Attributs in JavaScript stoppen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
