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的提交