button綁定onclick事件問題追蹤

寫個簡單的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"）

一、加return false；

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

二、添加類型type="button"

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

三、改用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 元素來建立按鈕。