Event: stopImmediatePropagation() Methode
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die stopImmediatePropagation() Methode der
Event-Schnittstelle verhindert, dass andere Listener desselben Ereignisses aufgerufen werden.
Wenn mehrere Listener an dasselbe Element für denselben Ereignistyp angehängt sind, werden sie in der Reihenfolge aufgerufen, in der sie hinzugefügt wurden. Wenn stopImmediatePropagation() während eines solchen Aufrufs aufgerufen wird, werden keine verbleibenden Listener auf diesem Element oder einem anderen Element aufgerufen.
Syntax
stopImmediatePropagation()
Parameter
Keine.
Rückgabewert
Keine (undefined).
Beispiele
Vergleich von Funktionen zur Ereignisunterbrechung
Das folgende Beispiel enthält drei Schaltflächen innerhalb von drei verschachtelten div-Elementen. Jede Schaltfläche hat drei Event-Listener, die für Klickereignisse registriert sind, und jedes div-Element hat einen Event-Listener, ebenfalls für Klickereignisse registriert.
- Die obere Schaltfläche erlaubt normale Ereignisausbreitung.
- Die mittlere Schaltfläche ruft
stopPropagation()in ihrem ersten Event-Handler auf. - Die untere Schaltfläche ruft
stopImmediatePropagation()in ihrem ersten Event-Handler auf.
HTML
<h2>Click on the buttons</h2>
<div>
outer div<br />
<div>
middle div<br />
<div>
inner div<br />
<button>allow propagation</button><br />
<button id="stopPropagation">stop propagation</button><br />
<button id="stopImmediatePropagation">immediate stop propagation</button>
</div>
</div>
</div>
<pre></pre>
CSS
div {
display: inline-block;
padding: 10px;
background-color: white;
border: 2px solid black;
margin: 10px;
}
button {
width: 100px;
color: #000088;
padding: 5px;
background-color: white;
border: 2px solid black;
border-radius: 30px;
margin: 5px;
}
JavaScript
const outElem = document.querySelector("pre");
/* Clear the output */
document.addEventListener(
"click",
() => {
outElem.textContent = "";
},
true,
);
/* Set event listeners for the buttons */
document.querySelectorAll("button").forEach((elem) => {
for (let i = 1; i <= 3; i++) {
elem.addEventListener("click", (evt) => {
/* Do any propagation stopping in first event handler */
if (i === 1 && elem.id) {
evt[elem.id]();
outElem.textContent += `Event handler for event 1 calling ${elem.id}()\n`;
}
outElem.textContent += `Click event ${i} processed on "${elem.textContent}" button\n`;
});
}
});
/* Set event listeners for the divs */
document
.querySelectorAll("div")
.forEach((elem) =>
elem.addEventListener(
"click",
(evt) =>
(outElem.textContent += `Click event processed on "${elem.firstChild.data.trim()}"\n`),
),
);
Ergebnis
Jeder Klick-Ereignis-Handler zeigt eine Statusmeldung an, wenn er aufgerufen wird. Wenn Sie die mittlere Schaltfläche drücken, werden Sie sehen, dass stopPropagation() alle Event-Handler, die für Klicks auf dieser Schaltfläche registriert sind, ausführen lässt, jedoch die Ausführung der Klick-Ereignis-Handler für die div-Elemente verhindert, die normalerweise folgen würden. Wenn Sie jedoch die untere Schaltfläche drücken, stoppt stopImmediatePropagation() alle weiteren Ausbreitung nach dem Ereignis, das es aufgerufen hat.
Spezifikationen
| Specification |
|---|
| DOM # ref-for-dom-event-stopimmediatepropagation① |
Browser-Kompatibilität
Loading…