常见的浏览器默认行为

---

前言

浏览器的**默认行为（default behavior）**指的是用户触发某些操作（如点击、提交表单、拖拽等）时，浏览器自动执行的一些预设动作。理解这些行为对于在 React 或其他前端框架中做交互逻辑控制非常重要。

---

🌐 常见的浏览器默认行为

用户操作	默认行为
<a href="..."> 点击链接	跳转页面
<form> 提交	刷新页面并跳转到 action 指定的 URL
按下 Enter 键（在 <input> 中）	提交所在的表单
拖拽文件到页面	打开文件
鼠标右键	打开右键菜单
选中文字	可复制、拖拽
滚动页面	页面滚动
<input type="checkbox">	切换选中状态
<button type="submit">	提交表单
拖动某些元素	启动 HTML5 拖拽事件
在 <img> 上拖动	下载或拖动图片到桌面

---

🛑 在 React 中常见需要 preventDefault 的场景

React 中常用 event.preventDefault() 来阻止这些默认行为，从而实现自定义逻辑。

1. 阻止表单提交页面刷新

function MyForm() {
  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止刷新页面
    // 自定义提交逻辑
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

2. 阻止链接跳转

function MyLink() {
  const handleClick = (e) => {
    e.preventDefault(); // 阻止默认跳转
    // 实现 SPA 内部路由跳转
  };

  return <a href="/profile" onClick={handleClick}>Profile</a>;
}

3. 阻止拖拽打开文件

useEffect(() => {
  const handleDragOver = (e) => e.preventDefault();
  const handleDrop = (e) => e.preventDefault();
  window.addEventListener('dragover', handleDragOver);
  window.addEventListener('drop', handleDrop);
  return () => {
    window.removeEventListener('dragover', handleDragOver);
    window.removeEventListener('drop', handleDrop);
  };
}, []);

4. 阻止某些默认快捷键行为（如 Ctrl+S 保存）

useEffect(() => {
  const handleKeyDown = (e) => {
    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
      e.preventDefault();
      // 触发自定义保存逻辑
    }
  };
  window.addEventListener('keydown', handleKeyDown);
  return () => window.removeEventListener('keydown', handleKeyDown);
}, []);

---

📝 注意事项

• React 合成事件中，event.preventDefault() 是调用合成事件的方法；
• 如果你使用 addEventListener 监听 DOM 原生事件，那是浏览器原生 Event，用法相同；
• 并不是所有默认行为都必须阻止，按需处理。

---

常见表单和拖拽操作中 preventDefault 的最佳实践与封装方式

1. ✅ 表单场景中的 preventDefault 使用技巧
2. 📦 拖拽上传的 preventDefault 全流程控制
3. 🧩 可复用的封装方法（React Hook or HOC）

---

✅ 一、表单中的 preventDefault 最佳实践

✅ 1. 阻止刷新并做表单校验

function FormWithValidation() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const isValid = validateForm(); // 校验逻辑
    if (!isValid) return;

    // 提交逻辑
    console.log("Form submitted");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" required />
      <button type="submit">Submit</button>
    </form>
  );
}

✅ 建议始终加上 e.preventDefault()，除非你确定需要跳转或刷新页面。

---

📦 二、拖拽上传中 preventDefault 的完整流程

⚠️ 拖拽操作的默认行为包括打开文件（如拖文件进页面会触发预览）

📘 实践流程：

import React, { useCallback, useEffect, useState } from "react";

export function DragAndDropUploader() {
  const [file, setFile] = useState<File | null>(null);

  const handleDrop = useCallback((e: DragEvent) => {
    e.preventDefault();
    const files = e.dataTransfer?.files;
    if (files && files.length > 0) {
      setFile(files[0]);
    }
  }, []);

  const preventDefaults = useCallback((e: Event) => {
    e.preventDefault();
    e.stopPropagation();
  }, []);

  useEffect(() => {
    const events = ["dragenter", "dragover", "dragleave", "drop"];

    for (const eventName of events) {
      window.addEventListener(eventName, preventDefaults, false);
    }
    window.addEventListener("drop", handleDrop, false);

    return () => {
      for (const eventName of events) {
        window.removeEventListener(eventName, preventDefaults, false);
      }
      window.removeEventListener("drop", handleDrop, false);
    };
  }, [handleDrop, preventDefaults]);

  return <div>拖动文件到页面上传: {file?.name}</div>;
}

---

🧩 三、封装 usePreventDefault Hook（通用封装）

📌 用于快速统一处理拖拽、链接、表单等默认行为

function usePreventDefault(
  ref: React.RefObject<HTMLElement>,
  events: string[] = ["dragover", "drop"]
) {
  useEffect(() => {
    if (!ref.current) return;

    const handler = (e: Event) => {
      e.preventDefault();
      e.stopPropagation();
    };

    for (const evt of events) {
      ref.current.addEventListener(evt, handler);
    }

    return () => {
      for (const evt of events) {
        ref.current?.removeEventListener(evt, handler);
      }
    };
  }, [ref, events]);
}

🔧 使用方式：

const containerRef = useRef<HTMLDivElement>(null);
usePreventDefault(containerRef, ["dragenter", "dragover", "drop"]);

---

✅ 小结

场景	是否需要 preventDefault	推荐写法
表单提交	✅ 避免页面刷新	e.preventDefault()
链接跳转	✅ 用于 SPA 导航控制	e.preventDefault()
拖拽文件	✅ 避免打开文件	全局监听 drop 事件
自定义快捷键	✅ 避免系统默认（如 Ctrl+S）	keydown + e.preventDefault()

---