button綁定onclick事件問題追蹤

寫個簡單的demo看下javascript

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

這並不會觸發瀏覽器頁面刷新效果,加個form表單試試html

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

結果就刷新頁面了,爲何呢?java

研究發現原來button這個控件在form表單裏面的時候默認是submit類型的,會提交表單,怎麼辦呢?瀏覽器

(IE的默認類型是 "button",而其餘瀏覽器中(包括W3C規範)的默認值是"submit")this

一、加return false;code

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

二、添加類型type="button"orm

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

三、改用inputhtm

<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不會對錶單進行任何操做。ip

另外要注意的是:input

表單中使用button,不一樣的瀏覽器會提交不一樣的值。IE提交 <button> 與 <button/> 之間的文本,而其餘瀏覽器將提交 value 屬性的內容,因此在表單中儘可能使用 input 元素來建立按鈕。

相關文章
相關標籤/搜索