直接調(diào)用form的submit()不會觸發(fā)自己綁定的submit事件顶岸，也不會觸發(fā)form上的onsubmit='return false'腔彰，導(dǎo)致頁面刷新一下，查文檔發(fā)現(xiàn)該方法會覆蓋掉表單的submit方法辖佣，不知道為啥要這樣設(shè)計霹抛，估計是有什么歷史原因
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement/submit
HTMLFormElement.submit()用來提交表單，這個方法和提交表單按鈕很類似卷谈。 在基于Gecko的瀏覽器中杯拐，調(diào)用該方法后，表單的 onsubmit 事件句柄(比如,onsubmit="return false;")不會執(zhí)行世蔗。不能保證由其一定會被 HTML 用戶代理調(diào)用
后發(fā)現(xiàn)還是能有些方法來實現(xiàn)端逼，代碼如下
<!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.直接提交表單,但是不調(diào)用form的onsubmit事件
form.submit()
//1_2. jQuery 也不會調(diào)用form的onsubmit事件
$('form').trigger('submit')
或者是 $('form').submit()
//2_1.IE 678 觸發(fā)form的onsubmit事件 chrome啥的都不支持 沒做測試 應(yīng)該也不會用這個
form.fireEvent('onsubmit')
//2_2.DOM Level 2 Event 觸發(fā)form的onsubmit事件
var e = document.createEvent('HTMLEvents')
e.initEvent('submit', true, true)
form.dispatchEvent(e)
//2_3.DOM Level 3 Event 觸發(fā)form的onsubmit事件 ie不支持
var e = new Event('submit')
form.dispatchEvent(e)
//3.還不如直接模擬點擊下提交
document.querySelector('button').click()
})
</script>
</body>
</html>
參考
前端魔法堂：onsubmit和submit事件處理函數(shù)怎么不生效呢？</br>
form.submit--mozilla</br>
jquery form表單submit()中的過程不執(zhí)行的回答</br>
form表單的submit()和onsubmit()的區(qū)別
