Ein kleines Beispiel erklärt, wie verhindert wird, dass Jquery-Ereignisse bubbling

Ein kleines Beispiel erklärt, wie verhindert wird, dass Jquery-Ereignisse bubbling_jquery verursachen

WBOY

Freigeben： 2016-05-16 16:41:42

Original

942 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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)