javascript e.preventDefault() 的作用和用法

📚 e.preventDefault() 的作用和用法

✅ e.preventDefault() 是一个常用的 JavaScript 方法，用于 阻止事件的默认行为。它通常在 表单提交、链接跳转、右键菜单 等场景中使用，防止浏览器执行特定的默认操作。

🔎 1. 为什么使用 e.preventDefault()？

默认情况下，许多 HTML 元素会有一些 默认行为：

使用 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}>
      <input
        type="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. 常见应用场景

⚠️ 4. 注意事项

• e.preventDefault() 只阻止 默认行为，不会阻止事件传播。如果你还想阻止事件冒泡，请使用 e.stopPropagation()。

const handleClick = (e) => {
  e.preventDefault();
  e.stopPropagation(); // 阻止事件冒泡
};

🛠 5. 常见问题解答

❓ e.preventDefault() 和 e.stopPropagation() 的区别？

📋 示例：组合使用

const handleClick = (e) => {
  e.preventDefault();     // 阻止默认行为
  e.stopPropagation();    // 阻止事件冒泡
  console.log('Button clicked!');
};

📢 总结

• e.preventDefault()：阻止元素的默认行为，例如链接跳转、表单提交、右键菜单等。
• e.stopPropagation()：阻止事件冒泡，防止事件传递给父元素。