JavaScript 中的 preventDefault() 與 return false 的區別？

在這篇文章中，我們將瞭解如何使用 JavaScript 的 preventDefault 和 return false 函式來覆蓋事件的預設行為。

阻止事件預設行為的兩種最流行的 JavaScript 方法是 preventDefault() 和 return false。

讓我們瞭解一下這兩個概念：

preventDefault()

Return false

preventDefault() 方法是 JavaScript 中事件物件上可用的一個函式。

Return false 不是函式，而是一個 JavaScript 語句。

它有助於停止某個事件的預設行為。

它不僅可以阻止預設行為，還可以阻止事件進一步傳播到父元素，並停止函式的進一步執行。

它僅在事件物件上可用。

它可以在 JavaScript 程式碼的任何地方使用。

示例 1

在這種情況下，我們將向表單的提交事件新增一個事件監聽器。為了阻止表單提交併在控制檯中記錄一條訊息，我們將在事件監聽器方法中的事件物件上執行 preventDefault()。這將防止頁面重新整理（這是典型的瀏覽器行為），並允許我們處理表單提交事件。

檔名：index.html

<!DOCTYPE html>
<html>
<head>
   <title>PreventDefault( ) vs Return false in JavaScript?</title>
</head>
<body>
   <form id="myForm">
      <input type="text" name="username" />
      <button type="submit">Submit</button>
   </form>

   <script>
      const form = document.getElementById('myForm');

      form.addEventListener('submit', function(event) {
         event.preventDefault();
         console.log('Form submission prevented.');
      });
   </script>
</body>
</html>

輸出

輸出將如下所示：

示例 2

在這個例子中，我們將使用 onclick 屬性將點選事件監聽器連線到提交按鈕，然後立即返回 false。這將阻止表單提交，並阻止事件傳播到其父元素。

檔名：index.html

<!DOCTYPE html>
<html>
<head>
   <title>PreventDefault( ) vs Return false in JavaScript?</title>
</head>
<body>
   <form id="myForm">
      <input type="text" name="username" />
      <button type="submit" onclick="return false;">Submit</button>
   </form>
</body>
</html>

輸出

輸出將如下所示：

結論

總之，JavaScript 中的 preventDefault() 和 return false 在事件處理和修改預設行為方面非常相似，但存在細微差別：一個允許事件傳播，另一個阻止事件傳播。preventDefault() 方法用於阻止事件的預設行為，而 return false 不僅阻止預設行為，還阻止事件傳播到父元素。我們學習了 JavaScript 中 preventDefault 與 return false 的概念，並透過一些示例進行了說明。

更新於： 2023年8月16日

2K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告