添加e.preventDefault后表单页面仍刷新、控制台无法输出输入值如何解决？

AI 小北

2026-10-6

问题原因

事件绑定逻辑被包裹在myCode函数中，若该函数没有被主动调用，submit事件监听不会生效，表单会执行默认提交行为导致页面刷新
若你的<script>标签是动态插入到body中，执行逻辑时表单、输入框等DOM元素还未加载完成，getElementById会返回null，绑定事件时报错中断执行，e.preventDefault自然不会生效
若存在其他脚本同时监听表单submit事件、或form标签自带onsubmit="return true"等配置，也会覆盖阻止默认行为的逻辑

解决步骤

调整代码执行逻辑，确保DOM元素加载完成后再绑定事件，可选两种写法：

// 写法1：去掉多余的函数包裹，script放在body末尾执行
const form = document.getElementById('form');
const names = document.getElementById('names');
const password = document.getElementById('password');

// 提前判空避免元素不存在报错
if(form && names && password) {
  form.addEventListener('submit', function(e){
    e.preventDefault(); 
    console.log('form submitted');
    console.log(names.value);
    console.log(password.value);
  });
}

// 写法2：保留myCode函数，监听DOM加载完成后调用
document.addEventListener('DOMContentLoaded', myCode);

function myCode(){
  const form = document.getElementById('form');
  const names = document.getElementById('names');
  const password = document.getElementById('password');

  if(!form || !names || !password) return;

  form.addEventListener('submit', function(e){
    e.preventDefault(); 
    console.log('form submitted');
    console.log(names.value);
    console.log(password.value);
  });
}