「掌控網頁互動：了解 JavaScript preventDefault()」

JavaScript 的 preventDefault()：網頁互動的幕後英雄

在網頁開發的世界裡，JavaScript 扮演著讓網頁動起來的關鍵角色。當使用者與網頁互動，例如點擊連結、提交表單，瀏覽器會觸發一連串的事件。而 preventDefault() 這個 JavaScript 方法，就像一位幕後英雄，默默地控制著這些事件的預設行為，讓開發者可以更精準地掌控網頁的互動方式。

什麼是預設行為？

簡單來說，預設行為就是瀏覽器在特定事件發生時，預期會自動執行的動作。舉例來說：

• 點擊連結 (<a> 標籤)： 瀏覽器會自動導向連結所指向的網址。
• 提交表單 (<form> 標籤)： 瀏覽器會將表單資料傳送到指定的伺服器。
• 點擊 checkbox (<input type="checkbox"> 標籤)： 瀏覽器會切換 checkbox 的選取狀態。

preventDefault() 的作用：阻止預設行為

preventDefault() 方法的作用，就是告訴瀏覽器：「嘿，這個事件我來處理，你不用執行預設的動作了。」這讓開發者可以覆寫預設行為，創造更豐富、更客製化的使用者體驗。

實際應用：幾個常見的例子

• 表單驗證： 在使用者提交表單前，先用 JavaScript 檢查輸入是否符合規範。如果驗證失敗，就可以用 preventDefault() 阻止表單提交，並顯示錯誤訊息，引導使用者修正。
• 自訂連結行為： 不想讓連結直接跳轉到新頁面？可以用 preventDefault() 阻止預設的導航行為，然後用 JavaScript 執行其他動作，例如彈出視窗、載入部分內容等等。
• 阻止checkbox預設行為： 有時候我們希望checkbox的行為與預期不同，例如點擊後觸發某些事件，而不是單純的勾選或取消勾選。

使用 preventDefault() 的注意事項

• 並非所有事件都可取消： 有些事件是無法取消的。可以使用 event.cancelable 屬性來檢查事件是否可取消。如果 event.cancelable 的值為 false，表示這個事件無法被 preventDefault() 阻止。
• preventDefault() 不會停止事件傳播： 事件在 DOM 樹中會不斷傳播（冒泡或捕獲）。preventDefault() 只會阻止預設行為，不會阻止事件繼續傳播。如果需要停止事件傳播，可以使用 stopPropagation() 方法。
• 尋找更好的替代方案： 在某些情況下，使用 preventDefault() 可能不是最佳解決方案。例如，要防止使用者與表單互動，可以使用 disabled 或 readonly 屬性。或者，可以使用 HTML 的約束驗證功能來拒絕無效的輸入。

個人心得

preventDefault() 是一個非常實用的 JavaScript 方法，可以讓我們更靈活地控制網頁的互動行為。但同時也要注意，過度或不當使用 preventDefault() 可能會導致使用者體驗下降，例如讓網頁的行為變得不直觀。因此，在使用 preventDefault() 時，應該仔細評估其必要性，並確保新的行為符合使用者的預期。

事件癥結點

新手開發者在使用 preventDefault() 時，最容易遇到的問題就是不清楚哪些事件可以取消，以及 preventDefault() 和 stopPropagation() 之間的差異。建議可以多參考 MDN Web Docs 上的說明文件，並實際撰寫程式碼進行測試，加深對這些概念的理解。

參考閱讀

• https://ithelp.ithome.com.tw/articles/10198999
• https://blog.csdn.net/weixin_43352901/article/details/107811768
• https://ithelp.ithome.com.tw/articles/10245446
• https://www.w3school.com.cn/jsref/event_preventdefault.asp