<button> 標籤在 Chrome、FireFox、 IE8、IE9 中預設有 Submit 的作用,在 IE6、IE7 中為 Button 作用,記得指定 type 屬性,防止各瀏覽器動作不一致。
/* 2012.10.12 Maple 記錄
2012.10.17 Maple 修改 */
我想大家應該都知道,套用 JQuery 的 button() 若想要有 icon 圖示,必須使用 <button> 標籤
使用 <input> 標籤是不行的 ( 我用的是 JQuery UI 1.8.23 版 )
但是需注意 <button> 標籤若沒有宣告 type 屬性,在 Chrome、FireFox、 IE8、IE9 中預設動作為 submit ,在 IE6、IE7 中為 button
經網友毛豆 提醒,記得加上 type 設定就能確保每個瀏覽器的動作一致
另外若是用到 javascript 的 var tempElement = document.createElement("button"); 時
不可使用 tempElement.type = 'button'; 的方式設定 ( IE7、IE8 不支援這樣的寫法 )
必須寫 tempElement.setAttribute("type","button");
至於以下的舊文就可以忽略了 ( 是我底子不好....不曉得 button 有 type 屬性 T_T )
在外層沒有 <form> 時不會有任何問題,
1.若外層有包 <form> 時,想讓 Button 無送出動作必須加上 onclick="return false;" 阻止在Chrome等瀏覽器的送出的動作
2.若外層有包 <form id='form1'> 時,為了讓 IE6、IE7 的 Button 有送出動作 只寫 onclick="$('#form1').submit();" 是‧不‧行‧的‧阿!!!!
必須寫 onclick="$('#form1').submit();return false;" 因為上面的寫法會造成 IE8 跟 IE9 連續送出兩次表單
我一直記得取消送出動作要加 return false; 卻忘記原本會 submit() 又多加 submit() 動作就造成連送兩次表單....
不知道有沒有人疑惑,
為什麼在沒有加 return false; 的情況下 chrome 跟 FireFox 卻不會有連送表單的問題
( 沒錯....只有 IE8 跟 IE9 會重送兩次表單 )
其實一開始 Chrome 跟 FireFox 並沒有這麼聰明!
因為我還在用 IE7 當開發環境的時後就為了 FireFox 重送兩次表單的問題研究好久
之後就很習慣會加上 return false; 防止送出表單
大概是之後的 FF 跟 chrome 版本有修正,讓瀏覽器不會快速送出兩次表單,所以現在沒加 return false; 也不會有問題。
而現在我改用 chrome 當做開發環境,上線前才開 IE 測試....
我以為 IE 永遠都這麼不合群不會把 Button 加上Submit 的動作 !
沒想到 IE8 就加了! 但還是不合群的送出兩次表單阿 !!!!! 又陰我 \ 皿 /