点击提交按钮时代码片段的onsubmit事件未执行问题排查

嘿，我来帮你搞定这个onsubmit事件不执行的问题！

问题出在哪？ #

核心原因是在表单的上下文环境里，submit会被默认解析为表单元素自身的submit()方法，而不是你定义的全局submit函数。当你在onsubmit属性里写submit()时，实际上调用的是表单自带的提交方法，根本没触发你写的那个打印日志的函数，所以控制台啥也不会输出～

几种修复方案任你选 #

1. 给函数改个不冲突的名字（最简单）

直接把你的函数名换成和表单方法不重名的，比如handleSubmit：

<script>
function handleSubmit() { 
  console.log('Submitting'); 
}
</script>
<form action="#" onsubmit="handleSubmit()">
  <input type="submit" />
</form>

2. 明确指定调用全局函数

如果你不想改函数名，那就用window.submit()来强制调用全局作用域下的函数，避开表单的方法：

<script>
function submit() { 
  console.log('Submitting'); 
}
</script>
<form action="#" onsubmit="window.submit()">
  <input type="submit" />
</form>

3. 使用事件监听绑定（更规范的现代写法）

推荐这种方式，把HTML结构和JavaScript逻辑分开，还能避免上下文冲突：

<script>
function submit() { 
  console.log('Submitting'); 
}

// 获取表单元素，绑定submit事件监听
document.querySelector('form').addEventListener('submit', function(e) {
  // 要是不需要表单真的跳转提交，记得加这句阻止默认行为
  // e.preventDefault();
  submit();
});
</script>
<form action="#">
  <input type="submit" />
</form>

内容的提问来源于stack exchange，提问作者trinalbadger587