原因は
buttonタグがデフォルトでtype='submit'挙動をする
でした!
buttonのclickイベントをJavaScriptで拾ってからsubmit()とかしちゃうと、そもそもボタン押下によるsubmitの発火とJavaScriptからのsubmit発火が2重に走るのよね
昔は、buttonタグとか使ってなくて全てinputタグでtypeでbuttonとか指定して使っていたんですけれど、"アクセシビリティ警察の方々からのボタンはbuttonタグを使え!"の圧を最近感じていて、積極的にbuttonを使い出して初めて知り得ました。
コーディングWebアクセシビリティ: WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
- 作者:Heydon Pickering
- 発売日: 2017/03/30
- メディア: Kindle版
Form Design Patterns ―シンプルでインクルーシブなフォーム制作実践ガイド
- 作者:Adam Silver
- 発売日: 2019/12/24
- メディア: 単行本(ソフトカバー)
2010年改正JIS規格対応 WEBアクセシビリティ完全カイド
- 作者:アライド・ブレインズ
- 発売日: 2010/10/21
- メディア: 単行本
インクルーシブHTML+CSS & JavaScript: 多様なユーザーニーズに応えるフロントエンドデザインパターン
- 作者:Heydon Pickering
- 発売日: 2018/03/05
- メディア: Kindle版
悲劇的なデザイン ―あなたのデザインが誰かを傷つけたかもしれないと考えたことはありますか?
- 作者:ジョナサン・シャリアート,シンシア・サヴァール・ソシエ
- 発売日: 2017/12/27
- メディア: 単行本