直接调用form的submit()不会触发自己绑定的submit事件，也不会触发form上的onsubmit='return false'，导致页面刷新一下，查文档发现该方法会覆盖掉表单的submit方法，不知道为啥要这样设计，估计是有什么历史原因
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement/submit
HTMLFormElement.submit()用来提交表单，这个方法和提交表单按钮很类似。 在基于Gecko的浏览器中，调用该方法后，表单的 onsubmit 事件句柄(比如,onsubmit="return false;")不会执行。不能保证由其一定会被 HTML 用户代理调用
后发现还是能有些方法来实现，代码如下
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!--onsubmit='return false'-->
<form id='f1'>
<input type="text" name="" id="" value="我就试试" />
<button type="submit">提交</button>
</form>
<div id="d1">我又想提交</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
var form = document.querySelector('form')
var d1 = document.querySelector('#d1')
form.addEventListener('submit',function(e){
e.preventDefault()
console.log('我提交了')
})
d1.addEventListener('click',function(){
//1_1.直接提交表单,但是不调用form的onsubmit事件
form.submit()
//1_2. jQuery 也不会调用form的onsubmit事件
$('form').trigger('submit')
或者是 $('form').submit()
//2_1.IE 678 触发form的onsubmit事件 chrome啥的都不支持 没做测试 应该也不会用这个
form.fireEvent('onsubmit')
//2_2.DOM Level 2 Event 触发form的onsubmit事件
var e = document.createEvent('HTMLEvents')
e.initEvent('submit', true, true)
form.dispatchEvent(e)
//2_3.DOM Level 3 Event 触发form的onsubmit事件 ie不支持
var e = new Event('submit')
form.dispatchEvent(e)
//3.还不如直接模拟点击下提交
document.querySelector('button').click()
})
</script>
</body>
</html>
参考
前端魔法堂：onsubmit和submit事件处理函数怎么不生效呢？</br>
form.submit--mozilla</br>
jquery form表单submit()中的过程不执行的回答</br>
form表单的submit()和onsubmit()的区别
