阻止預設行為 preventDefaut

一定要知道的東西。

簡述

有些 HTML 元素會自己的預設行為，例如說：

• <form> 按下 type=submit 的按鈕時會送出表單
• <a> 按下時會自動跳轉到連結的位置
• <input> 按下鍵盤會出現輸入的字

而 event.preventDefault 的作用就是用來阻止這些預設行為。

以表單來舉例

HTML：

 <form class="block">
  name: <input type="text" name="username">
  password: <input type="password" name="password1">
  password again:<input type="password" name="password2">
  <button>Submit</button>
</form>

JavaScript：

// 按鈕
const form = document.querySelector('form')
// 監聽 submit 事件
form.addEventListener('submit', function(e) {
  const pwd1 = document.querySelector('input[name=password1]')
  const pwd2 = document.querySelector('input[name=password2]')
  // 如果密碼不一致就不送出表單
  if (pwd1.value !== pwd2.value) {
    alert('密碼不一致')
    return e.preventDefault()
  }
})

你也可以自己試看看其他的元素，像是不要讓 <a> 跳轉或是 <input> 沒辦法輸入內容。