先頭のsubmitボタンはクリック（タップ）しなくてもclickイベントが発火する時がある

発生する条件は、テキストフィールドなどでEnterキーやGoボタンなどを押下したときです。その場合、直接formに対してsubmitイベントが走るかと思いきや、フォーム内のsubmitボタンを探してクリックイベントを発火させていました。

デモはこちらに（WordPress.comってiframeだめなのね）

デモ

こんな感じになりました。必ず上です。フォーム内の一番先頭のsubmitボタンをクリックすることでフォームをsubmitするという仕掛けです。

この挙動に関する仕様は以下で見つけました。

HTML Standard 4.10.21.2 Implicit submission

A form element’s default button is the first submit button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the “enter” key while a text control is focused implicitly submits the form), then doing so for a form, whose default button has activation behavior and is not disabled, must cause the user agent to fire a click event at that default button.

「ふーん」で終わるかもしれませんが、これ、上と下でsubmitボタンが持っている機能が違っていた場合などはハマります。特に基本的な機能を下のボタンが持っていて上のボタンは特殊な操作の時など特にハマります。ハマりました。

対応として、もし上部に例外的な機能のsubmitボタンであったときは、JavaScriptでゴニョゴニョするか、視覚的に存在しない形で一番上にsubmitボタンを置くなどになると思います。

今後も忘れててハマりそうなのでメモしておきました。