Web-Frontend
js-Tutorial
Ein kleines Beispiel erklärt, wie verhindert wird, dass Jquery-Ereignisse bubbling_jquery verursachen
Ein kleines Beispiel erklärt, wie verhindert wird, dass Jquery-Ereignisse bubbling_jquery verursachen
Was ist das sprudelnde JS-Ereignis?
Lösen Sie einen bestimmten Ereignistyp für ein Objekt aus (z. B. ein Onclick-Ereignis). Wenn das Objekt einen Handler für dieses Ereignis definiert, ruft dieses Ereignis diesen Handler auf, wenn dieser Ereignishandler nicht definiert ist oder das Ereignis „true“ zurückgibt , dann wird dieses Ereignis von innen nach außen an das übergeordnete Objekt dieses Objekts weitergegeben, bis es verarbeitet wird (alle ähnlichen Ereignisse des übergeordneten Objekts werden aktiviert) oder die oberste Ebene der Objekthierarchie erreicht, d. h. das Dokumentobjekt (einige Browser sind Fenster).
Wie kann verhindert werden, dass Jquery-Ereignisse sprudeln?
Erklären Sie es anhand eines kleinen Beispiels
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Porschev---Jquery 事件冒泡</title>
<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="divOne" onclick="alert('我是最外层');">
<div id="divTwo" onclick="alert('我是中间层！')">
<a id="hr_three" href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" mce_href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" onclick="alert('我是最里层！')">点击我</a>
</div>
</div>
</form>
</body>
</html>
Zum Beispiel die Seite oben,
In drei Schichten unterteilt: divOne ist die äußere Schicht, divTwo ist die mittlere Schicht und hr_two ist die innerste Schicht;
Sie alle haben ihre eigenen Klickereignisse und das innerste Tag verfügt auch über href-Attribute.
Führen Sie die Seite aus, klicken Sie auf „Klicken“ und es wird angezeigt: Ich bin die innerste Ebene ----> Ich bin die mittlere Ebene ----> Ich bin die äußerste Ebene
---->Dann verlinken Sie auf Baidu.
Das ist Event-Bubbling. Ursprünglich habe ich nur auf das Label mit der ID hr_ Three geklickt, aber es wurden drei Alarmvorgänge ausgeführt.
Ereignis-Bubbling-Prozess (dargestellt durch Tag-ID): hr_two----> Von der innersten Schicht zur äußersten Schicht sprudelnd.
Wie kann man es stoppen?
<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
event.stopPropagation();
});
});
<script>2.false zurückgeben;
Wenn der folgende Code zum Header hinzugefügt wird
<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
return false;
});
});
<script>
Klicken Sie erneut auf „Klicken Sie auf mich“, und ein Popup wird angezeigt: Ich bin die innerste Ebene, aber der Link zur Baidu-Seite wird nicht ausgeführt
Daraus ist ersichtlich:
Während der Ereignisverarbeitung wird das Ereignis-Bubbling verhindert, aber das Standardverhalten wird nicht blockiert (es führt den Sprung des Hyperlinks aus)
2.false zurückgeben;
Es gibt noch eine weitere Sache, die mit dem Sprudeln zu tun hat:
Wenn Sie es in das Click-Event des Header-A-Tags einfügen, klicken Sie auf „Click me“.
Sie werden feststellen, dass es nacheinander angezeigt wird: Ich bin die innerste Ebene ----> Ich bin die mittlere Ebene ----> Ich bin die äußerste Ebene, aber am Ende springt es nicht zu Baidu
Seine Funktion ist: Während der Ereignisverarbeitung wird das Ereignissprudeln nicht blockiert, sondern das Standardverhalten (es führt nur alle Popup-Boxen aus, führt jedoch keine Hyperlink-Sprünge aus)
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Verstehen Sie den Event-Bubbling-Mechanismus: Warum wirkt sich ein Klick auf ein untergeordnetes Element auf das Ereignis des übergeordneten Elements aus?
Jan 13, 2024 pm 02:55 PM
Ereignis-Bubbling verstehen: Warum löst ein Klick auf ein untergeordnetes Element ein Ereignis auf dem übergeordneten Element aus? Ereignis-Bubbling bedeutet, dass in einer verschachtelten Elementstruktur, wenn ein untergeordnetes Element ein Ereignis auslöst, das Ereignis wie beim Bubbling Schicht für Schicht an das übergeordnete Element weitergegeben wird, bis zum äußersten übergeordneten Element. Mit diesem Mechanismus können Ereignisse an untergeordneten Elementen im gesamten Elementbaum verbreitet werden und nacheinander alle zugehörigen Elemente auslösen. Um das Bubbling von Ereignissen besser zu verstehen, schauen wir uns einen bestimmten Beispielcode an. HTML-Code: <divid="parent&q
Warum wird das Event-Bubbling zweimal ausgelöst?
Feb 22, 2024 am 09:06 AM
Warum wird das Event-Bubbling zweimal ausgelöst? Ereignisblasen (Event Bubbling) bedeutet, dass im DOM, wenn ein Element ein Ereignis auslöst (z. B. ein Klickereignis), das Ereignis vom Element zum übergeordneten Element übergeht, bis es zum Dokumentobjekt der obersten Ebene übergeht. Das Ereignis-Bubbling ist Teil des DOM-Ereignismodells, das es Entwicklern ermöglicht, Ereignis-Listener an übergeordnete Elemente zu binden, sodass, wenn untergeordnete Elemente Ereignisse auslösen, diese Ereignisse erfasst und über den Bubbling-Mechanismus verarbeitet werden können. Manchmal stoßen Entwickler jedoch auf Ereignisse, die zweimal auftreten und ausgelöst werden.
Warum kann das Klickereignis in js nicht wiederholt ausgeführt werden?
May 07, 2024 pm 06:36 PM
Klickereignisse in JavaScript können aufgrund des Event-Bubbling-Mechanismus nicht wiederholt ausgeführt werden. Um dieses Problem zu lösen, können Sie die folgenden Maßnahmen ergreifen: Verwenden Sie die Ereigniserfassung: Geben Sie einen Ereignis-Listener an, der ausgelöst wird, bevor das Ereignis in die Luft sprudelt. Übergabe von Ereignissen: Verwenden Sie event.stopPropagation(), um das Sprudeln von Ereignissen zu stoppen. Verwenden Sie einen Timer: Lösen Sie den Ereignis-Listener nach einiger Zeit erneut aus.
Gründe und Lösungen für den Fehler von jQuery .val()
Feb 20, 2024 am 09:06 AM
Titel: Gründe und Lösungen für das Scheitern von jQuery.val() In der Front-End-Entwicklung wird jQuery häufig zum Betreiben von DOM-Elementen verwendet. Die Methode .val() wird häufig zum Abrufen und Festlegen des Werts von Formularelementen verwendet. Manchmal stoßen wir jedoch auf Situationen, in denen die Methode .val() fehlschlägt, was dazu führt, dass der Wert des Formularelements nicht korrekt abgerufen oder festgelegt werden kann. In diesem Artikel werden die Ursachen des .val()-Fehlers untersucht, entsprechende Lösungen bereitgestellt und spezifische Codebeispiele angehängt. 1.Ursachenanalyse.val() Methode
Für welche Szenarien können Ereignismodifikatoren in Vue verwendet werden?
May 09, 2024 pm 02:33 PM
Vue.js-Ereignismodifikatoren werden verwendet, um bestimmte Verhaltensweisen hinzuzufügen, darunter: Verhindern von Standardverhalten (.prevent), Stoppen von Ereignisblasen (.stop), Einmaliges Ereignis (.once), Erfassen von Ereignissen (.capture), Passives Abhören von Ereignissen (.passive), Adaptiv Modifikator (.self)Schlüsselmodifikator (.key)
Welche JS-Events sprudeln nicht?
Feb 19, 2024 pm 09:56 PM
Welche Situationen gibt es bei JS-Ereignissen, in denen keine Blasen entstehen? Ereignisblasen (Event Bubbling) bedeutet, dass nach dem Auslösen eines Ereignisses eines Elements das Ereignis vom innersten Element zum äußersten Element nach oben übertragen wird. Diese Übertragungsmethode wird als Ereignisblasen bezeichnet. Allerdings können nicht alle Ereignisse sprudeln. Es gibt einige Sonderfälle, in denen dies nicht der Fall ist. In diesem Artikel werden die Situationen in JavaScript vorgestellt, in denen keine Ereignisse auftreten. 1. Verwenden Sie stopPropagati
Warum wird der Event-Bubbling-Mechanismus zweimal ausgelöst?
Feb 25, 2024 am 09:24 AM
Warum kommt es zweimal hintereinander zum Event-Bubbling? Das Bubbling von Ereignissen ist ein wichtiges Konzept in der Webentwicklung. Es bedeutet, dass, wenn ein Ereignis in einem verschachtelten HTML-Element ausgelöst wird, das Ereignis vom innersten Element zum äußersten Element übergeht. Dieser Vorgang kann manchmal zu Verwirrung führen. Ein häufiges Problem besteht darin, dass die Ereignisblase zweimal hintereinander auftritt. Um besser zu verstehen, warum Event-Bubbling zweimal hintereinander auftritt, schauen wir uns zunächst ein Codebeispiel an:
Was ist Event-Bubbling? Eingehende Analyse des Ereignis-Bubbling-Mechanismus
Feb 20, 2024 pm 05:27 PM
Was ist Event-Bubbling? Eingehende Analyse des Event-Bubbling-Mechanismus Event-Bubbling ist ein wichtiges Konzept in der Webentwicklung, das die Art und Weise definiert, wie Ereignisse auf der Seite bereitgestellt werden. Wenn ein Ereignis für ein Element ausgelöst wird, wird das Ereignis ausgehend vom innersten Element übertragen und nach außen weitergeleitet, bis es zum äußersten Element weitergeleitet wird. Diese Abgabemethode ähnelt dem Sprudeln von Blasen im Wasser und wird daher als Event-Sprudeln bezeichnet. In diesem Artikel werden wir den Event-Bubbling-Mechanismus eingehend analysieren. Das Prinzip des Event-Bubbling lässt sich anhand eines einfachen Beispiels verstehen. Angenommen, wir haben ein H
