JavaScript中使用stopPropagation函數停止事件傳播範例_javascript技巧
- WBOY原創
- 2016-05-16 16:38:261641瀏覽
JS中的事件預設是冒泡方式，逐層往上傳播，可以透過stopPropagation()函數停止事件在DOM層次的傳播。如以下例子：
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逐層往上傳播，所以點擊button按鈕也傳播到了body層，於是body層的click也回應了。結果會跳出兩個警告框，分別是button與body。
加了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');
}
在button的單擊事件處理函數中使用了stopPropagation()停止事件傳播函數，所以在彈出來自button單擊事件的警告框以後就傳播不到body，也就不會再次彈出body的警告框，結果只談一次警告框。
好多童鞋在寫JS的時候，往往忽略了DOM事件逐層往上傳播的特性，導致程序出現異常。如果需要了解更深入的知識可以找找關於JS事件冒泡的資料看看。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn