在寫表單時經常會為了防止多次提交, 而加入提交按鈕一次點選後失效的功能,
但是新手的話有一點小問題要注意
比如下面的例子:

<form id='form1'>
<input type='text' name='content' />
<button type='submit' name='sub-btn'>Submit</button>
</form>

var form1 = docuemnt.getElementById('form1');
var input1 = form1.elements[0];

form1.addEventListener('submit'
 
, e => {
    var target = e.target;
    var btn = target.elements['sub-btn'];
    btn.disabled = true;
});

本來應該要實現的是點選按鈕或者回車submit以後, 按鈕變得不可選, 但是並沒有實現, 為啥?
因為提交以後頁面重新整理了, 按鈕以迅雷不及掩耳盜鈴響叮噹之勢變到不可選又變回來了…
那麼如何能看出效果呢?
最暴力的方式就是阻止submit的預設事件禁止重新整理, 然後寫自己的提交事件

form1.addEventListener('submit', e => {
    e.preventDefault();
    //...
 

})