Pertama -tama jelaskan perbedaan antara dua metode preventdefault dan stoppropagation di JS:
Apa peran metode preventdefault? Kita tahu, misalnya, <a href = "http://www.baidu.com"> Baidu </a>, ini adalah hal paling mendasar dalam html. .baidu. Lihat paragraf kode dan semua orang mengerti:
Salin kode kode sebagai berikut:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" /> />
<title> js mencegah link lompatan </iteme>
<type skrip = "Teks/JavaScript">
Fungsi stopdefault (e) {
if (e && e.preventdefault)
e.preventdefault ();
kalau tidak
window.event.ReturnValue = false;
Mengembalikan false;
}
</script>
</head>
<body>
<a href = "http://www.baidu.com" id = "testlink"> Baidu </a>
<type skrip = "Teks/JavaScript">
var test = document.geteLementById ('testlink');
test.onClick = function (e) {{
Peringatan ('Alamat tautan saya adalah:' + this.href + ', tapi saya tidak akan melompat.');
stopDefault (e);
}
</script>
</body>
</html>
Pada saat ini, klik tautan Baidu, dan Anda tidak akan membuka http://www.baidu.com, tetapi cukup ikuti kotak dialog peringatan.
Bagaimana dengan metode stoppropagation? Sebelum berbicara tentang metode stoppropagation, Anda harus menjelaskan kepada Anda Agen Acara JS.
Proksi acara menggunakan dua fitur yang sering diabaikan dalam insiden Javasciprt: elemen gelembung dan target peristiwa. Ketika suatu peristiwa pada suatu elemen dipicu, misalnya, mouse mengklik tombol, dan peristiwa yang sama akan dipicu pada semua leluhur elemen itu. Proses ini disebut insiden yang menggelegak; Untuk acara apa pun, elemen targetnya adalah elemen primitif, dan dalam contoh kami, tetapi juga tombol. Elemen target muncul dalam bentuk atribut dalam objek acara kami. Jika Anda menggunakan agen acara, kami dapat menambahkan prosesor acara ke suatu elemen, tunggu acara tersebut menggelembung dari elemen sub -levelnya, dan dapat dengan mudah menentukan elemen dari acara tersebut.
Metode stoppropagation adalah untuk mencegah acara JS menggelegak dan melihat kode.
Salin kode kode sebagai berikut:
<!
<Html xmlns = "http://www.w3.org/1999/xhtml" lang = "gb2312">
<head>
<title> Cegah transmisi gelembung insiden JS (cancelbubble, stoppropagation) </iteme>
<meta name = "kata kunci" konten = "js, peristiwa menggelegak, cancelbubble, stoppropagation" />
<script>
Function dosomething (obj, evt) {
waspada (obj.id);
var e = (evt)?
if (window.event) {
e.cancelbubble = true; // IE di bawah IE untuk mencegah menggelegak
} Kalau tidak {
//e.preventdefault ();
E.Stoppropagation ();
}
}
</script>
</head>
<body>
<Div id = "Parent1" OnClick = "Alert (this.id)">
<p> Ini adalah Pain1 Div
<Div id = "child1" onclick = "waspada (this.id)">
<p> Ini anak -anak1
</div>
<p> Ini adalah Pain1 Div
</div>
<br />
<div id = "parent2" ontClick = "alert (this.id)">
<p> Ini adalah Parent2 Div
<Div id = "child2" onclick = "dosomething (ini, peristiwa);" >> ">
<p> Ini anak -anak
</div>
<p> Ini adalah Parent2 Div
</div>
</body>
</html>
Mari kita pahami kode di atas.