Peristiwa dalam JS lalai kepada menggelegak, merambat ke atas lapisan demi lapisan Anda boleh menghentikan penyebaran peristiwa dalam hierarki DOM melalui fungsi stopPropagation(). Seperti contoh berikut:
Kod HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>stopPropagation()使用 - 琼台博客</title>
</head>
<body>
<button>button</button>
</body>
</html>
[/code]
没有加stopPropagation()
[code]
var button = document.getElementsByTagName('button')[0];
button.onclick=function(event){
alert('button click');
};
document.body.onclick=function(event){
alert('body click');
}
DOM merambat ke atas lapisan demi lapisan, jadi mengklik butang butang juga merambat ke lapisan badan, jadi klik pada lapisan badan juga bertindak balas. Akibatnya, dua kotak amaran muncul, iaitu butang dan badan.
Tambah stopPropagation()
var button = document.getElementsByTagName('button')[0];
button.onclick=function(event){
alert('button click');
// 停止DOM事件层次传播
event.stopPropagation();
};
document.body.onclick=function(event){
alert('body click');
}
StopPropagation() digunakan dalam fungsi pemprosesan acara klik butang untuk menghentikan fungsi penyebaran acara Oleh itu, selepas kotak amaran daripada peristiwa klik butang muncul, ia tidak boleh disebarkan ke badan, dan kotak amaran badan. tidak akan muncul lagi, hasilnya kotak amaran hanya dibincangkan sekali.
Apabila ramai kanak-kanak menulis JS, mereka sering mengabaikan ciri peristiwa DOM yang merambat ke atas lapisan demi lapisan, menyebabkan keabnormalan program. Jika anda memerlukan pengetahuan yang lebih mendalam, anda boleh mencari maklumat tentang acara JS menggelegak.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
