JS e.preventDefault()

e.preventDefault() 是 JavaScript 中一个非常常用的语句，用来阻止浏览器执行事件的默认行为。

🔍 一步步解释

在这里，e 是 事件对象（event object）。 当你写：

dropArea.addEventListener('dragover', (e) => {
    e.preventDefault();
});

这表示：

  • 当文件被拖到页面上（触发 dragover 事件）时，
  • 浏览器默认行为是：❌ 不允许文件被拖放到页面中（比如 Chrome 会直接显示一个“禁止”图标）
  • 我们调用 e.preventDefault()，意思是告诉浏览器： 👉 “别执行默认行为，让我自己处理拖拽上传逻辑。”

🧩 举个例子

假设你不写 e.preventDefault()：

  1. 当你把文件拖进网页区域时，浏览器可能会打开那个文件（像是直接打开一首 mp3 或 txt）。
  2. 你的拖拽上传就会失败，因为浏览器“抢先”做了别的事。

写了 e.preventDefault() 之后：

  • 文件不会被打开；
  • 事件就交给你的代码来处理；
  • 你就能自己决定要怎么处理拖放的文件，比如显示动画、上传文件。

💡 类似的例子

表单中：

form.addEventListener('submit', (e) => {
    e.preventDefault();  // 阻止浏览器默认刷新页面
    // 用 AJAX 上传而不是重新加载页面
});

右键菜单中：

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

总结一句话：

e.preventDefault() = 阻止默认动作，让你自己接管事件行为。