JavaScript 的默认行为

JavaScript 的"默认行为"通常指浏览器对某些事件（如点击链接、提交表单、右键菜单等）的内置响应动作。当这些事件被触发时，浏览器会自动执行默认操作。

常见的默认行为示例

1. 点击链接（<a>）

   • 默认行为：跳转到 href 指定的 URL。

   • 阻止代码：

     document.querySelector('a').addEventListener('click', function(e) {
       e.preventDefault(); // 阻止跳转
     });

2. 提交表单（<form>）

   • 默认行为：将数据发送到服务器并刷新页面。

   • 阻止代码：

     document.querySelector('form').addEventListener('submit', function(e) {
       e.preventDefault(); // 阻止提交和刷新
       // 手动处理数据（如 Ajax 提交）
     });

3. 右键点击（contextmenu 事件）

   • 默认行为：弹出浏览器右键菜单。

   • 阻止代码：

     document.addEventListener('contextmenu', function(e) {
       e.preventDefault(); // 阻止右键菜单
     });

4. 键盘事件（如按回车键）

   • 默认行为：在表单中按回车可能触发表单提交。

   • 阻止代码：

     document.addEventListener('keydown', function(e) {
       if (e.key === 'Enter') {
         e.preventDefault(); // 阻止默认回车行为
       }
     });

---

如何阻止默认行为？

使用 event.preventDefault() 方法：

element.addEventListener('eventType', function(event) {
  event.preventDefault(); // 阻止默认行为
});

---

其他相关方法

1. return false

   在旧代码或内联事件中，return false 可以阻止默认行为（仅适用于 onEvent 属性）：

   <a href="#" onclick="return false;">点击无反应</a>

2. event.stopPropagation()

   阻止事件冒泡（与默认行为无关）：

   button.addEventListener('click', function(e) {
     e.stopPropagation(); // 阻止事件向上传播
   });

---

默认行为的作用

• 提供基础的用户体验（如链接跳转、表单提交）。
• 允许开发者按需覆盖或扩展功能（如单页应用的路由控制）。

---

实际应用场景

• 单页应用（SPA）：阻止链接跳转，通过 Ajax 加载内容。
• 自定义表单验证：阻止无效数据的提交。
• 游戏/画布交互：禁用右键菜单或键盘快捷键。