这是一个创建于 1332 天前的主题，其中的信息可能已经有所发展或是发生改变。
<form> <input type="button" Onclick="submit()" value="提交"/> </form> 在 html 里写如上代码，未定义任何 submit 方法，点击按钮后 form 表单会直接提交。 如果覆写 form 素自带的 submit 方法
HTMLFormElement.prototype.submit=function(){console.log(123)} 此时点击按钮后 form 表单不再提交，控制台打印出 123 。 chrome 、ff 、edge 会如此，ie11 不会，这是浏览器新功能还是规范里规定的？
第 1 条附言 2022-02-22 14:32:35 +08:00
感谢前来解答的 v 友，不过还是请仔细看原文。
第 2 条附言 2022-02-22 14:33:15 +08:00
就是这个 submit 方法，它是如何调用的。
第 3 条附言 2022-02-22 15:30:25 +08:00
18 楼解决了我的问题，感谢各位。
 | 1 duke807 2022-02-22 14:00:51 +08:00 via Android 一般不是 onclick 值 |
 | 2 mercury233 2022-02-22 14:05:03 +08:00  1 https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit 你这是把浏览器原生的 submit 函数覆盖了 |
 | 3 3dwelcome 2022-02-22 14:08:44 +08:00 上课没认真听吧，VUE 里有专门 submit.prevent 属性，来阻止表单的默认提交行为。 |
 | 4 waiaan OP @mercury233 浏览器原生 submit 方法是挂载在 window 上的还是 HTMLFormElement 原型上的？ window 上的可以理解是全局函数，如果是 form 元素原型上的它是怎么调用的？还是说浏览器做了处理？ |
 | 6 DoubleWu 2022-02-22 14:30:15 +08:00 W3C 标准中有如下规定： When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. 译：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。 https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2 |
| 8 mercury233 2022-02-22 14:36:39 +08:00 |
| 9 3dwelcome 2022-02-22 14:37:32 +08:00 “就是这个 submit 方法，它是如何调用的。” form 自古以来就有 onsubmit 方法啊。 和 onclick 一样，正常是挂载到 form 元素上的。 不是浏览器新功能，是远古功能。 |
| 10 waiaan OP @3dwelcome ……我也没调用 onsubmit 方法，我调用的是没定义过的 submit 方法，它是怎么知道去找 form 的 submit 方法？ |
| 12 3dwelcome 2022-02-22 14:44:24 +08:00 @waiaan 正常所有的 form 提交，都是需要走 submit 方法的。 也就是提到 form 元素的 Onsubmit='console.log(123)'重载函数。 和你那句 HTMLFormElement.prototype.submit=function 是一个意思。 |
 | 13 misaka19000 2022-02-22 14:46:26 +08:00 1 额，看傻了。。。在以前没有 Ajax 通过 JS 调用 HTTP 请求的年代，不都是通过这个 input 按钮来提交 form 表单的吗？这个有什么奇怪的。。。 |
| 14 waiaan OP @3dwelcome 是这样没错，但是 ```js Onclick="submit()" ``` 这个点击事件的 submit 方法它是怎么调用到的，我代码里没有定义过它，它也不是全局函数，它怎么知道我是要提交表单呢？而且我自己再定义一个 submit 函数，这个函数也不会被这个点击事件调用。 |
| 15 waiaan OP |
| 17 3dwelcome 2022-02-22 14:53:34 +08:00 你只指"<input type="button" Onclick="submit()" value="提交"/>" 行为为什么会表现和<input type=''submit">一致？ 我猜可能就是 onclick 里的 submit()吧。 |
 | 18 codehz 2022-02-22 14:54:19 +08:00 3 关于楼主的这个问题，你可以把 onclick 改成 debugger ，然后开 F12 看一下，它实际上有多个 with 上下文 相当于所有在 onXXX 属性里执行的代码都会变成 with(document) { with(form) { with(input) { //以此类推，就是每个上级元素 xxx } } } 的形式，我记得之前在 html spec 里看过，不知道哪位老哥可以给出引用 |
| 19 3dwelcome 2022-02-22 14:55:48 +08:00 |
| 20 waiaan OP @3dwelcome 17 楼说的没错，就是这个意思，因为我没有定义 submit 这个方法。 --- 楼主这个 button 里 submit()函数方法，就是向上查找并调用了 form 里的 onsubmit 啊。 --- 没太明白你说的向上查找是什么意思 |
| 21 waiaan OP |
| 22 codehz 2022-02-22 15:00:07 +08:00 @3dwelcome 问题在于，你 onsubmit 如果改成一个返回 truthy 指（也就是可以转换成 true 的表达式），原本的 submit 依旧会被执行（ console.log 刚好返回 undefined ，所以会自动阻止原本 submit 方法的执行（ |
 | 23 foolnius 2022-02-22 15:01:57 +08:00 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement HTMLFormElement 不就包括了 submit()方法吗？ IE5.5 都兼容 |
| 24 codehz 2022-02-22 15:03:30 +08:00 @waiaan 并不是，对于任意通过 onXXX 绑定的事件处理函数都有类似 with 的处理逻辑（不在 form 章节里，但是 html spec 太长了，不是很想找。。。），显然你这里用的是 oninput |
 | 26 lawler 2022-02-22 15:14:41 +08:00 4 formObject.submit() 是原生 JS 默认实现，所有浏览器都支持，包括 IE ，你测试 IE 不支持，不确定是什么问题。古老的代码中，经常会看到 Onclick=return false ，就是为了屏蔽默认实现。而你 input 的 onclick 调用了 from 的默认实现。 |
| 27 codehz 2022-02-22 15:18:54 +08:00 1 @3dwelcome 说错了，submit 方法的默认行为是触发 submit 事件，然后根据是否 preventDefault 来决定是否执行提交行为，而 onXXX 事件绑定机制是当返回 falsy 值时 preventDefault ，因此当你同时定义 onsubmit 和 submit 方法时，两者将独立工作互不影响（（通过 type=submit 按钮触发的会发送 submit 事件，然后如果没被 preventDefault 就执行原生提交程序（与 submit 函数无关）；而通过 submit 方法手动调用的就会进入你自定义的函数上，也不会触发事件（除非你手动 dispatchEvent ） |
| 28 waiaan OP |
 | 30 Rache1 2022-02-22 15:24:27 +08:00 1 一会儿你还会发现有个 reset() 方法，也可以玩。 |
Select Language