为何函数返回false时表单仍能提交？技术咨询

嘿，这个问题我之前也碰到过，核心原因其实是函数命名和表单自带方法冲突了，我给你一步步拆解：

问题根源：命名优先级的坑 #

你全局定义了submit()函数，但在表单的onsubmit事件处理函数里，浏览器的作用域规则会优先取当前表单元素的属性——而所有表单元素本身就自带一个submit()方法（用来触发表单提交的内置方法）。

也就是说，你写的onsubmit="return submit()"，调用的根本不是你自己定义的那个返回false的函数，而是表单自带的submit()方法！

为什么会提交？ #

表单自带的submit()方法返回值是undefined，而在表单的onsubmit事件里，只有明确返回false才会阻止提交。return undefined在逻辑判断里等价于return true，所以表单自然就正常提交了。

你可以做个小测试：把你的函数改成这样：

function submit() {
  console.log("我是自定义的submit函数！");
  return false;
}

点击提交按钮后，控制台根本不会输出这句话——足以证明你的自定义函数完全没被执行。

两种解决办法 #

1. 给自定义函数换个名字（最推荐） #

避免和内置方法重名，比如改成checkForm()：

function checkForm() { return false; }
<form action="#" onsubmit="return checkForm()">
  账号 : <input name="name" type="text" id="name"> <br>
  <input type="submit" value="login">
</form>

这样就能正常调用你自己的函数，返回false阻止提交了。

2. 明确调用全局函数 #

如果一定要用submit这个名字，你可以通过window对象明确指定调用全局的函数：

function submit() { return false; }
<form action="#" onsubmit="return window.submit()">
  账号 : <input name="name" type="text" id="name"> <br>
  <input type="submit" value="login">
</form>

window.submit()会绕过表单元素的作用域，直接调用你定义的全局函数。

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