e.preventDefault() 是 JavaScript 事件处理中非常常用的方法，主要用于阻止事件的默认行为。下面我给你详细介绍它的作用、使用场景和示例。

一、e.preventDefault() 作用

  • 阻止浏览器对某个事件的默认处理
    浏览器中，很多事件都会触发默认行为，比如：
    • <a> 标签点击默认跳转链接
    • <form> 表单提交默认刷新页面
    • 右键菜单默认弹出浏览器菜单
    • 按下某些键默认触发浏览器快捷键等

调用 e.preventDefault() 后，浏览器就不会执行这些默认行为。

二、参数说明

  • e 通常是事件对象（event），习惯写成 event、e、evt 等
  • preventDefault() 是事件对象的方法，直接调用即可，无需传参

三、常见使用场景和示例

1. 阻止超链接跳转

<a href="https://example.com" id="myLink">点击我但不跳转</a>

<script>
document.getElementById('myLink').addEventListener('click', function(e) {
    e.preventDefault();  // 阻止跳转
    alert('链接点击被拦截！');
});
</script>

2. 阻止表单默认提交

<form id="myForm">
    <input type="text" name="username" />
    <button type="submit">提交</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault();  // 阻止表单刷新页面
    alert('表单提交被阻止，可以做AJAX提交');
});
</script>

3. 阻止右键菜单弹出（常用于自定义菜单）

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    alert('自定义右键菜单逻辑');
});

四、注意事项

  • 只有可取消的事件才能用 preventDefault() 阻止默认行为
  • 需要配合事件监听函数的事件对象才能调用
  • 不是阻止事件传播（停止冒泡），阻止传播用 e.stopPropagation()
  • preventDefault() 只是阻止浏览器默认行为，事件仍会传播

五、总结

方法功能举例
e.preventDefault()阻止浏览器默认行为阻止表单提交、链接跳转等
e.stopPropagation()阻止事件冒泡/捕获传播阻止事件向上层元素传递

好的，下面是一个简单示例，演示如何用 e.preventDefault() 阻止表单默认提交，改用自定义的验证逻辑和AJAX提交（模拟）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>preventDefault 自定义表单提交示例</title>
</head>
<body>

<form id="myForm">
  <label>
    用户名:
    <input type="text" name="username" id="username" />
  </label><br /><br />
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();  // 阻止表单默认提交（刷新页面）

  const username = document.getElementById('username').value.trim();

  // 简单验证
  if (username === '') {
    alert('用户名不能为空');
    return;
  }

  // 模拟AJAX提交
  alert(`验证通过，准备提交数据：用户名 = ${username}`);

  // 这里你可以用 fetch 或 XMLHttpRequest 发送数据
  // fetch('/submit', { method: 'POST', body: new URLSearchParams({username}) })
  //   .then(res => res.json())
  //   .then(data => console.log(data));

});
</script>

</body>
</html>

运行效果：

  1. 表单提交时不会刷新页面
  2. 先检查用户名是否为空
  3. 验证通过后弹出提示（模拟发送数据）