Erklären Sie zunächst den Unterschied zwischen den beiden Methoden von PreventDefault und Stopppropagation in JS:
Welche Rolle spielt die Verhinderungdefault -Methode? Wir wissen zum Beispiel <a href = "http://www.baidu.com"> baidu </a>, dies ist das grundlegendste in HTML. .Baidu. Sehen Sie einen Absatz des Codes und jeder versteht:
Kopieren Sie den Code -Code wie folgt:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" /> />
<titels> js verhindern link springen </title>
<script type = "text/javaScript">
Funktion stopdefault (e) {
if (e && e.preventDefault)
E.PreventDefault ();
anders
window.event.returnValue = false;
False zurückgeben;
}
</script>
</head>
<body>
<a href = "http://www.baidu.com" id = "testlink"> baidu </a>
<script type = "text/javaScript">
var test = document.getElementById ('testlink');
test.onclick = function (e) {{{{{{{{{{{{{{
Alert ('Meine Link -Adresse lautet:' + thref + ', aber ich werde nicht springen.');
stopdefault (e);
}
</script>
</body>
</html>
Klicken Sie zu diesem Zeitpunkt auf Baidu -Link, und Sie öffnen nicht http://www.baidu.com, sondern tauchen Sie einfach ein Alarmdialogfeld an.
Was ist mit der StopPropagation -Methode? Bevor Sie über die StopPropagation -Methode sprechen, müssen Sie Ihnen den JS -Event -Agenten erklären.
Ereignisproxies verwenden zwei Funktionen, die im Javasciprt -Vorfall häufig ignoriert werden: Ereignisspubblöcke und Zielelemente. Wenn beispielsweise ein Ereignis auf einem Element ausgelöst wird, klickt die Maus auf eine Schaltfläche, und das gleiche Ereignis wird in allen Vorfahren dieses Elements ausgelöst. Dieser Prozess wird als Baus sprudeln. Für jeden Fall sind seine Zielelemente primitive Elemente und in unserem Beispiel, aber auch in der Taste. Das Zielelement wird in Form von Attributen in unseren Ereignisobjekten angezeigt. Wenn Sie einen Ereignisvertreter verwenden, können wir den Ereignisprozessor einem Element hinzufügen, bis das Ereignis von den Elementen von Sub -Level aus blasen und leicht bestimmen, aus welchem Element das Ereignis beginnt.
Die StopPropagation -Methode besteht darin, zu verhindern, dass das JS -Ereignis sprudelt und einen Code aufsieht.
Kopieren Sie den Code -Code wie folgt:
<!
<Html xmlns = "http://www.w3.org/1999/xhtml" Lang = "GB2312">
<kopf>
<titels> Verhindern
<meta name = "keywords" content = "js, Ereignis Bubbling, CancelBubble, StopPropagation" />
<Script>
Funktion Dosen (obj, evt) {
Alarm (obj.id);
var e = (evt)?
if (window.event) {
E. CancelBubble = True;
} Anders {
//e.preventDefault ();
E.Stoppropagation ();
}
}
</script>
</head>
<body>
<div id = "parent1" onclick = "alert (this.id)">
<p> Das ist Pain1 Div
<div id = "child1" onclick = "alert (this.id)">
<p> Dies ist Child1
</div>
<p> Das ist Pain1 Div
</div>
<br />
<div id = "parent2" onclick = "alert (this.id)">
<p> Dies ist Parent2 Div
<div id = "child2" onclick = "dosomething (dieses, Ereignis);" >> ">
<p> Das ist Child2
</div>
<p> Dies ist Parent2 Div
</div>
</body>
</Html>
Lassen Sie uns den obigen Code verstehen.