結論から言って、スマートフォンサイトでmouseoverを使うな。超面倒くさい。
とはいえ、うちのコンテンツのRagnarok日記は、脚注にmouseoverしたときにでてくるチップが、本編を補強するネタになっているので、あれがないと、それはそれで寂しい。というわけで、スマフォでも見られなければいけないわけだ。
もともと、あのへんのコードとかは、16年も前に書いたものなので、Netscape対応だとか、Opera対応だとか、まーいろいろやっていたんだけど、流石に、タッチには未対応だった。(当たり前) で、スマフォって、実はmouseoverをクリックにエミュレートするような挙動が組み込まれていて、まー、特に手を入れないでも、ちょっと直したら、チップが出るところまではできた。
が、問題は閉じるとこだ。
オリジナルのコードはmouseoutで閉じるんだけど、まー、これはエミュレートされていないので、閉じるを実装する必要があったんだけど、これが曲者。タップして出てくるから、タップで閉じりゃいいって、当然の発想で、ドキュメントのtouchstartにリスナーつけると、ちゃんと閉じられたりして、良さげになるんだけも、iOSのとき、これだと、同じ要素をタップすると、二回目以降が反応しない。別の要素を触ったあとならいいんだけどね。
どうやらこれはiOSの仕様のようで、おそらく、touchstartと、touchend、clickのイベントの発生順序とその間にコンテンツのがどう描画されたかってのが、関係してくるようだ。ここでポイントなのが、clickイベントが起こらないと、次のtouchstartが起こらないっぽいという不思議仕様。Androidは起こる。なので、iOSに合わせてclickを使うんだけど、Androidでは起こるので、ここで回避用コードを埋め込む必要がある
あーめんどくせ。
Ragnarokのとこでロードされるjsは、今回書き直した。まー、それなりに動く。けと、ipadとか、マウスもいけるタブレットとかの考慮は足りてないので、うーん……
まあ、あとは書き直すしかないので、一旦これで、公開とします。
Ragnarok日記、スマフォで見られます。ただ、ミドルレンジだと、描画遅いんで、iPhoneとか、ハイエンドAndroidのほうがストレスなく読めると思うよ!
あの懐かしいRO日記が、スマフォで見られます。
コメントする