Rumah > Artikel > hujung hadapan web > Contoh penggunaan fungsi stopPropagation untuk menghentikan penyebaran acara dalam kemahiran JavaScript_javascript

Contoh penggunaan fungsi stopPropagation untuk menghentikan penyebaran acara dalam kemahiran JavaScript_javascript

WBOYasal: 2016-05-16 16:38:261657semak imbas

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.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Native js meniru jq untuk menentukan sama ada penyemak imbas semasa adalah ie, tepat untuk kemahiran ie6~8_javascriptArtikel seterusnya：Native js meniru jq untuk menentukan sama ada penyemak imbas semasa adalah ie, tepat untuk kemahiran ie6~8_javascript

Artikel berkaitan

Lihat lagi