form下button按鈕的onclick事件

1.問題：

點擊form下按鈕, 異步提交獲取數據填充給定id節點內容, 發現按鈕使用button標簽時, 頁面內容變成剛剛加載的內容了。

所以,

　　 跑去測試下input:button, input:submit(默認會去執行form的submit事件, 除非設頂返回值為false),

　　 button的onclick和form的onsubmit事件的執行過程.

2.發現:

button的onclick事件如果未返回false, 在firefox和chrome事件會繼續, 去執行form的submit, 從而導致頁面整個轉向.

//=======================================================

html:

<form action="#/" onsubmit="selfSubmit();" method="post">
    <input type="button" value="input按鈕+手動提交form"
        onclick="btnSubmitForm(this);this.form.submit();"/>
    <input type="button" value="input按鈕"
        onclick="btnSubmitForm(this);"/>
    <button  onclick="btnSubmitForm(this);">
        button按鈕
    </button>
    <button  onclick="btnSubmitForm(this);return false;">
        button按鈕2+return false
    </button>
</form>

js:

function selfSubmit () {
    console.log('@selfSubmit');
}
function btnSubmitForm(o) {
    console.log('@btnSubmitForm');
    console.log(o);
    // return false; // 無效
}

采用方式:

<button  onclick="btnSubmitForm(this);return false;">
        button按鈕2+return false
</button>

4.在線: http://zhwq.github.com/zhng/test/base/form/input_button_event.html

5.測試結論:

　　ie下button的事件和input:button一樣

　　firefox, chrome上button默認會觸發form的提交