如何阻止事件冒泡與預設事件？

【修真院小課堂】——如何阻止時間冒泡冒泡與預設事件

目錄1.背景介紹

2.知識剖析

3.常見問題

4.解決方案

5.編碼實戰

6.擴充套件思考

7.參考文獻

8.更多討論

1.背景介紹

1.什麼是事件?

事件是文件或瀏覽器視窗中發生的特定的互動瞬間。

2.知識剖析

1.什麼是冒泡事件?

在乙個物件上觸發某類事件（比如單擊onclick事件），如果此物件定義了此事件的處理程式，那麼此事件就會呼叫這個處理程式， 如果沒有定義此事件處理程式或者事件返回true，那麼這個事件會向這個物件的父級物件傳播， 從裡到外，直至它被處理（父級物件所有同類事件都將被啟用），或者它到達了物件層次的最頂層，即document物件（有些瀏覽器是window）。

2.什麼是預設事件?

3.常見問題

如何阻止事件冒泡和預設事件

4.解決方案

5.編碼實現

1.阻止事件冒泡

//ie9+,其他主流瀏覽器

// var event  = event || window.event;
// event.stoppropagation();
//火狐未實現
// window.event.cancelbubble = true;
//不建議濫用，jq中可以同時阻止冒泡和預設事件
// return false;
//相容模式
//   stopbubble(event);
function stopbubble(e) else
}

//全支援

// event.preventdefault();
//該特性已經從 web 標準中刪除，雖然一些瀏覽器目前仍然支援它，但也許會在未來的某個時間停止支援，請盡量不要使用該特性。
// window.event.returnvalue = false;
//不建議濫用，jq中可以同時阻止冒泡和預設事件
// return false;
// 相容
// stopdefault(event);

以下事件不冒泡：blur、focus、load、unload。

允許多個操作被集中處理（把事件處理器新增到乙個父級元素上，避免把事件處理器新增到多個子級元素上），它還可以讓你在物件層的不同級別捕獲事件。

參考資料

參考資料:

q1.冒泡事件與捕獲事件的區別？

a1：1.事件冒泡：事件由子元素獲取並沿dom樹向上傳播

2.事件捕獲：事件由根元素獲取並沿dom樹向下分發

事件冒泡：最集體的--逐級傳遞到最不具體的 span -> div -> body ->html 

時間捕獲：最不具體的逐級傳遞到最具體的 html -> body -> div -> span

q2：用冒泡還是捕獲？

a2：為了相容ie低版本瀏覽器最好用冒泡，而且事件的預設方式是冒泡；

q3：事件**（委託）的原理及優缺點？

a3：   原理：利用冒泡原理，將元素的事件繫結到父級元素上；

阻止事件冒泡，阻止預設事件

阻止事件冒泡 html 冒泡事件測試 js table click function td click function span click function e 如果js中不加 e.stoppropagation 那輸出結果就依次為span td table。這就叫事件冒泡。就是從下到上，從裡到...

JS阻止事件冒泡，阻止預設事件

1 event.stoppropagation 阻止冒泡事件，不讓事件向documen上蔓延，但是預設事件任然會執行，當你掉用這個方法的時候，如果點選乙個鏈結，這個鏈結仍然會被開啟 2 event.preventdefault 阻止預設事件，呼叫此方法是，鏈結不會被開啟，但是會發生冒泡，冒泡會傳遞到...

JS如何阻止事件冒泡和阻止預設事件

event.stoppropagation 阻止事件冒泡，event.preventdefault 阻止預設事件。在這插播乙個事件捕獲or事件冒泡 事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。相反的，事件冒泡是自下而上的去觸發事件 繫結事件方法的第三個引數，就是控制...