*

技術

スマホでlabelタグに仕込んだonclick関数が発火しなかった

2016/12/07

皆様初めまして。
フロントエンドエンジニアの波多野と申します。

表題の件は、仕事で2日も掛けてしまったのが悔しかったので、忘れないでおこうと思ったことです。

結論から言うと、
【form部品のid、name、for名と同じ関数名を使うと、スマホではon系イベントを取得できない】
のだそうです。

<\input id="onaji">
<\label for="onaji" onclick="onaji()">

こんな感じで、自分では分かりやすいつもりで既存の関数名とinputのid名、labelのfor名を揃えたのですが、これがかえってよくありませんでした。
PCではchromeもfirefoxもieも動くし、chromeのf12でのスマホ側の動きも問題無かったのに、実機で確認するとiPhoneもAndroidもうんともすんとも言いません。

迫る納期に焦りが募るばかりです。

単語を変えて検索し直したところ、どんぴしゃな記事を発見しました。
思わず心の中で小躍りしました。

無事に一件落着しましたが、振り返ってみると検索しなくても気付けたミスだと思います。
焦ると初歩的な事も見えなくなるという良い教訓になりました。

次に似たような案件が来たら、速攻で片付けてやります。

-技術