現象
既存の画面に新しくボタンを追加して、ajaxでサーバーからデータを取得する機能を作ろうと思った。
サーバー再度完成して、画面にボタンをつけた。
<button id="hoge">ゲット！</button>
押してみたらclickイベント発火したあと別の画面に飛ばされた。
ドはまりした
原因と結論
①body全体？がフォームタグで囲まれてた。→actionのURLにpostしてた。
②buttonタグにtype指定してなかった →タイプ指定しないとsubmitの動きする！
原因分かるまでにやったこと
1. なんかclickイベント上書きされてる？
js長すぎて読み切れなかったからこれをずっと疑ってた。
・どんなイベントが設定されているか一目で分かる·Visual Event MOONGIFT を参考にVisual Eventでイベント見たり
・chromeの開発者ツールでconsole.trace()したり
・同じく開発者ツールでステップ実行したり
したけどわからなくてブラウザのjs切っても同じ現象だった→違う
2. てことはformの動きっぽい？
→html読んだら<form></form>に囲まれてた！！！
3. でもなんでbuttonなのにsubmitされるの？
<input type="button" ...><!-- に変更してみた→現象起きなくなった --> <input type="submit" ...><!-- に変更してみた→現象起きた --> <button id="hoge">ゲット！</button><!-- に戻してみた→現象起きた -->
buttonをググってみる→ <BUTTON>－HTMLタグリファレンス
type属性ではsubmit（送信ボタン）、reset（リセットボタン）、button（汎用的に使える押しボタン）のいずれかを指定してください。 初期値はtype="submit"で、送信ボタンを作成します。
まじかー！うろ覚えでtype指定しないといけないの忘れてた
学び
- ブラウザのjsを切ればjsのせいかどうか切り分けできる
<button>にはtype指定がいる- chromeの開発者ツールで
Preseve logにチェックを入れると画面遷移してもコンソールログ残るの便利
