📚 e.preventDefault() 的作用和用法
✅ e.preventDefault() 是一个常用的 JavaScript 方法，用于 阻止事件的默认行为。它通常在 表单提交、链接跳转、右键菜单 等场景中使用，防止浏览器执行特定的默认操作。
🔎 1. 为什么使用 e.preventDefault()？
默认情况下，许多 HTML 元素会有一些 默认行为：
| 元素/事件 | 默认行为 |
|---|
<a> 链接点击 | 跳转到 href 指定的地址 |
| 表单提交 | 页面刷新并提交表单数据 |
| 输入框按 Enter 键 | 提交表单 |
| 右键单击 | 显示浏览器的右键菜单 |
| 拖拽文件到页面 | 打开文件 |
使用 e.preventDefault() 可以 阻止这些默认行为，从而实现自定义的功能。
🛠 2. 基本用法示例
📋 示例 1：阻止链接的默认跳转行为
import React from 'react';const MyComponent = () => {const handleClick = (e) => {e.preventDefault(); console.log('Link clicked, but no navigation!');};return (<a href="https://example.com" onClick={handleClick}>Click me</a>);
};export default MyComponent;
🔎 解释
- 当用户点击链接时，默认会跳转到
https://example.com。 e.preventDefault() 阻止了这个跳转行为，因此不会导航到新的页面。
📋 示例 2：阻止表单的默认提交
import React, { useState } from 'react';const MyForm = () => {const [inputValue, setInputValue] = useState('');const handleSubmit = (e) => {e.preventDefault(); console.log('Form submitted with:', inputValue);};return (<form onSubmit={handleSubmit}><inputtype="text"value={inputValue}onChange={(e) => setInputValue(e.target.value)}/><button type="submit">Submit</button></form>);
};export default MyForm;
🔎 解释
- 默认情况下，表单提交会导致 页面刷新。
- 使用
e.preventDefault() 可以阻止页面刷新，并执行自定义的表单提交逻辑。
📋 示例 3：阻止右键菜单
const handleContextMenu = (e) => {e.preventDefault(); console.log('Custom right-click menu');
};document.addEventListener('contextmenu', handleContextMenu);
🔎 解释
- 默认情况下，右键单击会显示 浏览器的右键菜单。
e.preventDefault() 阻止了这个行为，从而实现自定义的右键菜单。
🎯 3. 常见应用场景
| 场景 | 说明 |
|---|
| 阻止链接跳转 | 在 onClick 中阻止 <a> 的跳转行为 |
| 阻止表单提交 | 阻止表单提交时页面刷新，执行自定义逻辑 |
| 阻止右键菜单 | 实现自定义的右键菜单 |
| 阻止拖拽打开文件 | 阻止文件被拖入浏览器时自动打开 |
| 阻止按键事件 | 阻止某些按键的默认功能，例如阻止 Enter 提交表单 |
⚠️ 4. 注意事项
e.preventDefault() 只阻止 默认行为，不会阻止事件传播。如果你还想阻止事件冒泡，请使用 e.stopPropagation()。
const handleClick = (e) => {e.preventDefault();e.stopPropagation();
};
🛠 5. 常见问题解答
❓ e.preventDefault() 和 e.stopPropagation() 的区别？
| 方法 | 作用 | 适用场景 |
|---|
e.preventDefault() | 阻止默认行为 | 阻止表单提交、链接跳转等 |
e.stopPropagation() | 阻止事件冒泡，防止事件传递给父元素 | 阻止父元素监听到事件 |
📋 示例：组合使用
const handleClick = (e) => {e.preventDefault(); e.stopPropagation(); console.log('Button clicked!');
};
📢 总结
e.preventDefault()：阻止元素的默认行为，例如链接跳转、表单提交、右键菜单等。e.stopPropagation()：阻止事件冒泡，防止事件传递给父元素。
