form.submit() 页面刷新，表单onsubmit未执行

直接调用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()的区别

最后编辑于：2018.05.10 15:13:18