preventDefault - 取消預設觸發行為

Posted on In

用 preventDefault 來「取消預設觸發行為」

html:

1
<a href="#" style="margin-top: 1800px; display: block;">menu icon</a>

因為margin-top: 1800px;，所以a連結會在頁面的底部

但是，當我點擊a連結後，我發現：
❗️ 跳到網頁的「最上方」了
❗️ 網址帶上了一個「#」

原因為：這是瀏覽器的「預設行為」。瀏覽器想要找到「錨點」，但是因為沒有寫錨點（href="#"），所以就會跑到網頁的「最上方」

🎃 瀏覽器會有一些「預設的行為」

例如：
🍋 <form>表單

  • 預設行為：按下「submit」按鈕後，會把「欄位內的資料」，都送到後端資料庫去
  • 取消“預設行為”：取消「submit」的動作（不要將資料送到後端資料庫去）

為什麼需要取消「元素的預設行為」？

下面有一個a連結，點擊後就會跳到 https://www.google.com

1
<a href="https://www.google.com" style="margin-top: 1800px; display: block;" class="link">menu icon</a>

現在，我想要取消a連結的「預設行為」

原因為：這個a連結「不是一個“真正的連結”」，而是一個「menu icon」

✅ 我希望：點擊a連結後，會展開右側選單–> a連結只是單純讓我用來“操控其他元素”

❌ 我不希望：點擊a連結後，會「跳轉到指定網頁」（這是「元素的預設行為」）

取消「元素的預設行為」

作法如下：

JS:

🎃 建立變數el，來選取.link

.addEventListener

🎃 因為「<a></a>」是一個「連結」，對「連結」會做的動作是「點擊」，所以.addEventListener要使用「click 事件」

取消「元素的預設行為」

🎃 「click 事件」的function小括號裡面要寫「e」，原因為：要仰賴這個e來提供「點擊後的各種資訊」（e會用“物件”的形式來呈現）

🎃 用e.preventDefault();來取消「元素的預設行為」

🍋 a連結的預設行為是：點擊後，會「跳轉到指定網頁」

1
2
3
4
5
6
7
8
9
var el = document.querySelector('.link');

el.addEventListener('click',function(e){
    // 原本，點擊連結會「跳轉到指定網頁」
    // 取消「元素的預設行為」
    e.preventDefault();

    console.log('test');
},false);

🍋 點擊a連結之前

因為margin-top: 1800px;，所以a連結會在頁面的底部

🍋 點擊a連結後

a連結還是會在頁面的底部，因為已經取消「元素的預設行為」了

e.preventDefault();常會用在：

🎃 取消a連結的預設行為

🎃 取消「submit」按鈕的預設行為

❌ 我不希望：透過傳統的「submit」方式來傳送資料到後端做驗證

✅ 我希望：先透過我的 JS 去查詢表單有無錯誤（先做驗證，表單填寫有錯誤–> 就會彈跳提醒訊息），驗證完成後再透過 post 去傳送