button绑定onclick事件问题追踪

最新推荐文章于 2023-02-26 21:31:39 发布

weixin_34255055

最新推荐文章于 2023-02-26 21:31:39 发布

阅读量771

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/1067377855/blog/541443

版权

2019独角兽企业重金招聘Python工程师标准>>>

写个简单的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 元素来创建按钮。

转载于:https://my.oschina.net/1067377855/blog/541443