JavaScript中使用stopPropagation函數停止事件傳播例子

更新時間：2014年08月27日 10:34:47 投稿：junjie

這篇文章主要介紹了JavaScript中使用stopPropagation函數停止事件傳播例子,即阻止事件冒泡的一個方法,需要的朋友可以參考下

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事件冒泡的資料看看。

您可能感興趣的文章:

echarts實現橫向和縱向滾動條(使用dataZoom)
這篇文章主要給大家介紹了關于echarts使用dataZoom實現橫向和縱向滾動條的相關資料,最近項目中使用到echarts圖表,當數據過多時需要添加橫向滾動條,需要的朋友可以參考下
2023-08-08
js前端登錄加密解決方案
項目中需要前端書寫登錄頁面，用戶輸入賬號密碼，本文主要介紹了js前端登錄加密解決方案，具有一定的參考價值，感興趣的可以了解一下
2024-02-02
百度UEditor編輯器如何關閉抓取遠程圖片功能
這篇文章主要介紹了百度UEditor編輯器如何關閉抓取遠程圖片功能,需要的朋友可以參考下
2015-03-03
javascript頁面渲染速度測試腳本分享
這篇文章主要介紹了javascript頁面渲染速度測試腳本,計算瀏覽器渲染HTML頁面所需要的時間,需要的朋友可以參考下
2014-04-04
判斷window.onload是否多次使用的方法
window.onload想必大家都有使用過吧，在窗口加載時執(zhí)行，如果多次使用window.onload該如何判斷呢？下面與大家分享個方法
2014-09-09
一款js和css代碼壓縮工具[附JAVA環(huán)境配置方法]
壓縮css和js是我們工作中經常要處理的一件事,這里介紹的是一款基于YUICompressor,淘寶封裝的css和js壓縮工具TBCompressor.
2010-04-04
bootstrap flask登錄頁面編寫實例
這篇文章主要為大家詳細介紹了bootstrap flask登錄頁面編寫實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
跟我學習javascript創(chuàng)建對象(類)的8種方法
跟我學習javascript創(chuàng)建對象(類)的8種方法，每一種方法都有詳細的介紹，不知道javascript如何創(chuàng)建對象的朋友，不要錯過這篇文章。
2015-11-11
純javascript實現簡單下拉刷新功能
這篇文章主要介紹了純javascript實現簡單下拉刷新功能,沒有借助任何的框架，十分簡單實用，有需要的小伙伴來參考下吧。
2015-03-03
JavaScript中數據過濾的幾種常見方法
JavaScript是一種廣泛使用的編程語言,它提供了多種方法來對數據進行過濾,在本文中,我們將介紹JavaScript中常見的幾種數據過濾方法,并提供相應的示例,感興趣的朋友跟隨小編一起看看吧
2023-10-10