开发实况3.1.前端相关-form表单下button点击事件无效

---

开发实况3.1.前端相关-form表单下button点击事件无效

---

一、简介

记在最近开发中遇到的一个问题，点击注册按钮，预期结果是出现按钮点击事件的方法里ajax对result的处理–alert提示，但实际却为没有任何返回结果，只是注册成功时数据库增添了用户的信息，并且网页被刷新了(将保留日志勾选上以后发现register跳红)

<form class="sign-up-form" style="margin-top: -100px;">
<!-- 其余代码省略-->     
<button class="submit-btn" onclick="register()">立即注册</button>
<!-- 其余代码省略-->   
</form>

二、问题分析

form中提交使用button的话会默认使用form的method方式提交，onclick中的点击事件不会生效，当我们点击按钮的时候会自动提交表单

三、解决方法

可将button的type设置为button，默认为submit(但实际不同的浏览器会有不同的默认值，所以菜鸟教程中提醒请始终为button规定type属性)。

<form class="sign-up-form" style="margin-top: -100px;">  
<!-- 其余代码省略-->     
<!-- form中提交使用button的话会默认使用form的method方式提交，onclick中的点击事件不会生效，但是可以把其type设置为button来解决，默认是submit -->
<!-- <div class="submit-btn" οnclick="register()">立即注册</div>，这样也可，但是解决不了ios问题，ios下用div实现按钮功能放在form内点击事件会失效-->
<button class="submit-btn" type="button" onclick="register()">立即注册</button>
<!-- 其余代码省略--> 
</form>

---