button绑定onclick事件问题追踪
button绑定onclick事件问题追踪
只尺八寸 发表于2年前
button绑定onclick事件问题追踪
  • 发表于 2年前
  • 阅读 53
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 今天突然遇到一个有关onclick事件触发会刷新页面的问题,一番研究发现button的问题,追踪结果如下:

写个简单的demo看下

<button onclick="aa(this);">click</button>
 <script type="text/javascript">
 function aa(obj){
  obj.innerHTML=0;
 }
 </script>

这并不会触发浏览器页面刷新效果,加个form表单试试

<form>
  <button onclick="aa(this);">click</button>
 </form>
 <script type="text/javascript">
 function aa(obj){
  obj.innerHTML=0;
 }
 </script>

结果就刷新页面了,为什么呢?

研究发现原来button这个控件在form表单里面的时候默认是submit类型的,会提交表单,怎么办呢?

(IE的默认类型是 "button",而其他浏览器中(包括W3C规范)的默认值是"submit")

1、加return false;

 <form>
  <button onclick="aa(this);return false">click</button>
 </form>
 <script type="text/javascript">
 function aa(obj){
  obj.innerHTML=0;
 }
 </script>

2、添加类型type="button"

<form>
  <button type="button" onclick="aa(this);">click</button>
 </form>
 <script type="text/javascript">
 function aa(obj){
  obj.innerHTML=0;
 }
 </script>

3、改用input

<form>
  <input type="button" onclick="aa(this)" value="click">
 </form>
 <script type="text/javascript">
 function aa(obj){
  obj.value=0;
 }
 </script>

总结:
当在IE浏览器下面时,button标签,input标签type属性为button是一样的功能,不会对表单进行任何操作。
但是在W3C浏览器,如Firefox下,button会提交表单,而input标签type属性为button不会对表单进行任何操作。

另外要注意的是:

表单中使用button,不同的浏览器会提交不同的值。IE提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容,所以在表单中尽量使用 input 元素来创建按钮。

共有 人打赏支持
粉丝 3
博文 20
码字总数 8239
×
只尺八寸
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: