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」であり、他のブラウザ(W 3 C仕様を含む)のデフォルト値は「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と同じ機能であり、フォームに対して何の操作も行わない.ただし、W 3 CブラウザではFirefoxのようにbuttonがフォームをコミットし、inputラベルtype属性がbuttonの場合、フォームは何も操作されません.
さらに注意したいのは、
フォームでbuttonを使用すると、ブラウザによって異なる値がコミットされます.IEはとの間のテキストをコミットし、他のブラウザはvalue属性の内容をコミットするので、フォームではできるだけinput要素を使用してボタンを作成します.