事情的起因是這樣的，下面我們娓娓道來！
公司官網上要求點選每個新聞模組有下面的互動
有乙個遮罩層從底部出來。
html**如下：
.news-list是每個帶logo的新聞模組
.news-desc-wrap是從下面而來的遮罩層
我的第一次的js**是這樣的：
var newslist=$("
.news-list"),
newsdescwrap=$("
.news-desc-wrap");
newslist.on(
'click
',function());
newsdescwrap.on(
'click
',function(event
));
對於.news-list-expand這個類
.news-list-expand.news-list .news-desc-wrap通過這個類名來控制.news-desc-wrap的顯示和隱藏
沒加.news-list-expand這個類之前的樣式是如下的:
.news-list .news-desc-wrap第一次當我點選帶logo的新聞模組的遮罩層第一次出現了後面怎麼點選都不消失，我自己檢查**發現我無非是新增.news-list-expand和移除.news-list-expand
審查元素的結果是如下圖的：
每次點選.news-desc-expand也就是遮罩層.news-list都會更新也就是.news-list-expand被去掉後立刻又加上了
是.news-list的兒子當我點選.news-desc-wrap的時候事件就會往上傳遞觸發.news-list的click事件而點選.news-list是新增.news-list-expand這個類的，所以我點選.new-desc-wrap這個遮罩層想要.news-list去掉.news-list-expand這個類時.news-list觸發新增.news-list-expand的事件所以就出現了如截圖中的.news-list-expand每次都更新的狀態。
所以我們要阻止冒泡事件也就是當我點選遮罩層的時候讓這個事件不再向上傳播。那麼我們用加入 event.stoppropagation()來阻止冒泡的傳遞~！
var newslist=$("
.news-list"),
newsdescwrap=$("
.news-desc-wrap");
newslist.on(
'click
',function());
newsdescwrap.on(
'click
',function(event
));
關於事件冒泡就理解這麼多！初次寫blog請各位多多批評指教，謝謝！！ 讀 總結 11 詳談事件
什麼是事件？事件是類的一種成員。如果型別定義了事件，那麼它就可以通知其它物件發生了特定的事情 比如button的click事件 事件是實現這種互動的型別成員。事件是建立在委託的基礎之上，事件是被封裝的委託。理解這幅圖對於理解事件的原理非常重要 1，發布者類訂義了事件成員。2，訂閱者類註冊在事件成員被...
事件冒泡,事件捕獲
js事件流中有一種事件被稱為 冒泡事件 當乙個元素被觸發乙個事件時，該目標元素上的事件會優先被執行，然後向外傳播到每個祖先元素，恰如水裡的乙個泡泡似的，從產生就一直往上冒，到達水平面時，它才消失。在這個過程中，如果你只希望觸發目標元素上的事件，而不想它傳播到祖先元素上去，那麼你需要在 泡泡 離開物件...
事件捕獲 事件冒泡
body div id div1 div id div2 div id div3 div div div body script window.onload function odiv1.onclick fn1 odiv2.onclick fn1 odiv3.onclick fn1 false 冒泡...