1、举4个栗子:
有如下form表单,包含了一个button按钮:
情况1:
<form action="">
<button onclick="">我是按钮</button>
</form>
尽管button按钮没有执行任函数,但是点击按钮后,页面刷新。
情况2:
<form action="http://www.baidu.com">
<button onclick="">我是按钮</button>
</form>
点击按钮后,页面跳转百度
情况3:
<form action="http://www.baidu.com">
<input type="button" value="我是按钮"/>
</form>
点击按钮后,无任何反应
情况4:
<form action="">
<input type="button" value="我是按钮"/>
</form>
点击按钮后,无任何反应
2、现象
1、form表单在提交后会跳转action属性中的地址
2、action属性若为空,则刷新当前页面
3、button按钮会触发表单提交,input按钮则不会触发
3、结论
1、当按钮类型,也就是type="submit"时,form表单会触发提交事件
2、button按钮默认type为submit
3、input标签指定type为button,form表单不会提交
4、不行,我非要用button
<form action="" onsubmit="return false">
<button onclick="">我是按钮</button>
</form>
给form标签加上onsubmit="return false"
属性,当发生提交时,不触发action,这样能进入button中的点击事件。