Contoh penggunaan fungsi stopPropagation untuk menghentikan penyebaran acara dalam kemahiran JavaScript

Contoh penggunaan fungsi stopPropagation untuk menghentikan penyebaran acara dalam kemahiran JavaScript_javascript

WBOY

Lepaskan： 2016-05-16 16:38:26

asal

1640 orang telah melayarinya

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');
}

Salin selepas log masuk

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');
}

Salin selepas log masuk

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.