html上でbuttonを押すとreloadのような挙動になるのを回避する

結論：buttonタグの中で type="button" を設定する。

対処したかった問題

chromeの拡張アドオンを自作しており、popup.html上のbuttonをクリックしてイベントをトリガーしていた。
しかし、clickイベント発火時に、htmlがreloadのような挙動してしまい、clickまでにdomに対して変更した操作が元に戻ってしまう挙動になってしまっていた。

下記がhtml上でのbutton。これにonclickイベントがついている状態。

<button id="test">
  <span>Test</span>
</button>

解決策

htmlのbuttonのデフォルトのtypeはsubmitのため、reloadされてしまうことが分かった。下記のようにtype="button"を指定することでsubmitの挙動を回避可能。

<button type="button" id="test">
  <span>Test</span>
</button>