【HTML】form 内で button 要素を押した場合に必ずsubmitしてしまう原因

はじめに

だいぶ初歩的な部分ではありますが、ちょっとハマったのでメモ。

事象

form内にあるbuttonのclickイベント時にjQueryで処理を実行していたが、何らかの別のイベントも発火していたらしく意図した挙動になっていなかった。

原因

form内にあるbuttonでtype属性指定なしだと、submitイベントが発火する仕様があるとのことでそれが原因だった。

qiita.html

<button>ボタン</button>

対策

type属性をbuttonに設定すると、submitイベントが発火しなくなるとのことで解決！

qiita.html

<button type='button'>ボタン</button>

最後に

割と単純なことではあったが、ハマってしまった。。。

参考