0%

JS 筆記 - 終止冒泡事件 stopPropagation 與 取消預設觸發行為 preventDefault

JavaScript Note

冒泡事件 Event Bubbling 與 捕獲事件 Event Capturing

addEventListener 中有提到 false 為預設的冒泡事件,這篇學習指定元素終止冒泡事件。
情境會用在倘若有兩個元素重疊的時候,就可以使用這個語法。

複習一下 addEventListener 的寫法,以click 為例:

1
2
3
4
5
6
7
el.addEventListener(
"click",
function () {
alert("click here");
},
false
);

最後面出現的布林值的意思是:

  • false (冒泡事件 Event Bubbling): 從指定的元素往外找 (預設為 false)
  • true (捕獲事件 Event Capturing): 從最外層找到指定元素

舉一個例子,

1
2
3
<body class="body">
<div class="box"></div>
</body>

目前看到有一個 .box,他的最外層也有一個 .body,共兩個元素,透過 addEventListener 的多選特性,在 JS 寫下兩個語法,目前都是設定為從指定元素往外找:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var el = document.querySelector(".box");
el.addEventListener(
"click",
function () {
alert("click box");
},
false
);

var bodyEl = document.querySelector(".body");
bodyEl.addEventListener(
"click",
function () {
alert("click body");
},
false
);

如果寫這樣,當點擊 .box 區域時,alert 就會彈出兩次,因為 .box 是在 .body 的內層,布林值為 false ,所以電腦會往外層找。

codepen: https://codepen.io/hnzxewqw/pen/gOpmWZN

使用終止冒泡事件 stopPropogation

這時要在指定的元素中寫上終止冒泡事件 ()的語法,讓 alert 在指定元素後就終止冒泡事件,在指定元素的 function 的小括號,要告訴它有一個事件,所以會變這樣寫:

function(e) 或是 function(event)

並加上這段語法:
e.stopPropogation();告訴瀏覽器,除了這個 function 的事件外,都不要啟動冒泡事件。

所以完整的程式碼如下:

1
2
3
4
5
6
7
8
9
var el = document.querySelector(".box");
el.addEventListener(
"click",
function (e) {
e.stopPropogation(); //終止冒泡事件語法
alert("click box");
},
false
);

codepen: https://codepen.io/hnzxewqw/pen/XWbMgdE

preventDefault 取消預設觸發行為

preventDefault 取消預設觸發行為stopPropogation 終止冒泡事件,兩個在網頁上呈現很像,但用法不太一樣。

preventDefault 是取消原本標籤預設的功能,像是取消 a 連結在點擊後會前往指定網頁,或是 submit 按鈕會傳送資料到資料庫去的功能…等等。

寫法跟 stopPropogation 的位置一樣,如下:

1
2
3
4
5
6
7
el.addEventListener(
"click",
function (e) {
e.preventDefault(); //取消預設觸發行為
},
false
);

是直接告訴 function 第一件要執行的內容,並且在後方在寫入想要進行的語法,這樣的好處是,可以自訂義想要執行的功能,就不會受到預設值的影響。

codepen: https://codepen.io/hnzxewqw/pen/dyovRKb