Heim > Artikel > Web-Frontend > 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

WBOYOriginal: 2016-05-16 16:41:42905Durchsuche

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?

1.event.stopPropagation();

<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
event.stopPropagation();
});
});
<script>

Klicken Sie erneut auf „Klicken Sie auf mich“. Es wird angezeigt: „Ich bin die innerste Ebene“ und verlinke dann auf Baidu

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:

1.event.stopPropagation();

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;

Während der Ereignisverarbeitung wird das Bubbling von Ereignissen verhindert und ein Standardverhalten wird verhindert (z. B. wurde gerade kein Hyperlink-Sprung ausgeführt)

Es gibt noch eine weitere Sache, die mit dem Sprudeln zu tun hat:

3.event.preventDefault();

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)

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：2 Lösungen für das Problem fehlender Referrer im JS-Sprung in IE_javascript-KenntnissenNächster Artikel：2 Lösungen für das Problem fehlender Referrer im JS-Sprung in IE_javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen