# 甚麼是 preventDefault() :question: `e.preventDefault()` 顧名思義就是...防止預設 :heavy_exclamation_mark: 意思就是說有些**事件**或是**標籤**有他自帶的預設行為 * 而當你因為一些不知名原因要用自己的方式取代掉 * 或單純想叫他閉嘴，那就可以使用這個指令 :kissing_smiling_eyes: # 舉個例子 ![](https://i.imgur.com/vKnIddV.jpg) 很簡單，很生活，大家每天都會使用到的功能 這裡我用瀏覽器視窗點擊右鍵來當範例 你覺得這個選單很醜想把它關掉，那就可以玩一下 這裡有個需要知道的知識，我怎麼知道如何監聽右鍵呢? 不就是 click 事件? :x::x::x: [參考資料](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event) # 看看程式碼 ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>學個取消預設</title> <style> #menu { width: 50px; height: 80px; border: 1px solid red; position: absolute; display: none; } </style> </head> <body> <div id="menu"> </div> <script> // 選到自己做的選單 element var menu = document.getElementById('menu'); // 在瀏覽器直接註冊監聽器監聽右鍵事件 document.addEventListener('contextmenu', function(e) { e.preventDefault(); menu.style.display = 'block'; menu.style.left = e.clientX + 'px'; menu.style.top = e.clientY + 'px'; }); // 模仿一下當你點擊組件時，選單關掉 document.addEventListener('click', function() { menu.style.display = 'none'; }); </script> </body> </html> ``` # 說說結論 你也可以試試 :a: 標籤，他的預設就是要給你點開連結 :link: 真的是一個有趣而且重要的功能 這告訴我們以後看到不喜歡的就直接把它關掉 :x: 想都不用想 :100: