小ネタ2つ!transitionendと暗黙のsubmit

こんばんは、有村です。2ヶ月なにも書いてなかった。
MacBook Proを破格で譲ってもらったので、せめてMacを使って何かをせねば…とブログ書くことにしました(?)

今回は小ネタ2つ。

小ネタ1・transitionendってバブリングするんだ!?
親もアニメーションするし、子もアニメーションする、というコードを書いていました。
(だいぶ略してますが)

さらに、animation1には、アニメーションが終わったタイミングで発火するnanikasuruを仕込んでいます。

で、動かしてみると、なぜか意図しないタイミングでnanikasuruが実行されるんですよね。
なんでだ?どこだ?と調べると、ちょうどanimation2のアニメーションが終わった後でした。

animation2には何も仕込んでないのにな……と思ったものの、それがよくなかった!
なぜなら、transitionendはバブリングするから…!

つまり、animation2のtransitionendがバブリングしてanimation1まで伝わり、
animation1のtransitionendが発火してしまったということですね!

これを仕込まないといけなかった。ここにだいぶやられた。

小ネタ2・暗黙のsubmitってあったんだね!?
業務中、こんな相談を受けました。
「テキストボックスにフォーカスしたままEnterを押すと、なぜか戻る動作が発動してしまうんだけど…」
と。

こんな感じのコードでした。

name=”return”っていかにも。どうやらこれがsubmitされて、画面遷移が行われているらしい。
しかしJS周りで特にそこをいじっている様子もなく、なんでだろうと首をひねっていたところ、
「あれ、このページ以外でも、テキストボックスでEnter押したら勝手にsubmitしたことになってないか?」
と気付きました。

まさか…と思い、W3C周りを調べてみたところ、なんとこんな項目が。
暗黙のsubmit。

hitting the “enter” key while a text field

まさにこれじゃないか。

ユーザがテキストボックスに入力して、その後すぐEnterを押してsubmitが実行されれば、
ユーザビリティとして便利やん!ってお話だったのですね…。

なお、複数のsubmitボタンがあった場合、一番はじめに出てくるsubmitが実行されるらしい。
だからreturnが送られていたのか…。

私が最初からバグだと決めつけてしまっていたので、「それって仕様じゃないのか?」「他でもそうなのか?」と多角的に考える気持ちを忘れていました。
それに、それなりに長いことフロントエンドに携わっていても、「こういう仕様だったの!?」と気付かされることが多いです。

日々勉強!って感じで、ほんとおもしろいですね、フロントエンド!
それでは、きょうはこのへんで。