阻止表单默认提交需调用event.preventDefault()，而非stopPropagation()；它必须绑定在submit事件上、在验证通过后调用，可阻止页面刷新但不影响事件冒泡。

JavaScript 中阻止表单提交的默认行为，关键不是“阻止冒泡”，而是**阻止默认动作**；表单提交本身不会因冒泡而触发跳转，真正导致页面刷新或重定向的是浏览器对 `

` 提交事件的默认处理。所以准确说法是：要阻止表单默认提交（刷新/跳转），应使用 event.preventDefault()；而 event.stopPropagation() 仅用于阻止事件向父元素传播，与页面跳转无关。

核心方法：preventDefault() 必须调用

表单的 submit 事件默认会把数据发往 action 指定地址，并刷新当前页面。只要在事件监听函数中调用 event.preventDefault()，就能取消这个行为：

• 必须绑定在 submit 事件上（推荐用 addEventListener('submit', ...)）
• 必须在事件处理函数内部调用，且不能晚于验证逻辑之后
• 调用后，页面不会跳转、不会刷新，但事件仍会向上冒泡（不影响父级监听）

别混淆：stopPropagation() 不解决跳转问题

event.stopPropagation() 只阻止事件继续向父元素传递，比如点击表单内按钮时，防止触发外层 div 的 click 监听器。但它完全不干预表单提交的默认跳转行为。单独使用它，页面照常刷新。

Expanso json-flatten

通过 CLI 或 MCP 服务器，使用 Expanso Edge 管道扁平化嵌套 JSON 对象。

下载

• 错误做法：event.stopPropagation(); —— 页面依然跳转
• 正确组合（如需）：event.preventDefault(); event.stopPropagation();（仅当同时需拦截冒泡+跳转时）

其他常见误区与替代写法

有些写法看似有效，但存在兼容性或副作用问题：

立即学习“Java免费学习笔记（深入）”；

• return false：在原生 DOM 事件监听中，它等价于 preventDefault() + stopPropagation()，但语义模糊，不推荐作为首选
• button type="button"：可避免触发表单提交，但仅适用于非 submit 类型按钮；若需回车提交或语义化表单，仍应保留 type="submit" 并配合 preventDefault()
• 旧 IE 的 event.returnValue = false：现代项目无需兼容，统一用 preventDefault() 即可

完整示例：安全绑定 + 验证 + 阻止

实际开发中，应在验证通过后再阻止默认行为，否则无效提交可能被静默丢弃：

const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  const email = document.getElementById('email').value;
  if (!email || !email.includes('@')) {
    alert('邮箱格式不正确');
    return; // 不调用 preventDefault，允许用户修正后重试
  }
  event.preventDefault(); // 验证通过才阻止
  // 此处可发起 fetch/AJAX 提交
});