materializeで個人開発してます。
Django + materializeで個人のWebアプリを作っています。
この記事はmaterializeを使っていて、うまく動かせなくて悩んだ内容の記事です。
dropdownがうまく使えない
dropdownしっていますか？ あのdropdownです。
Qiitaの記事画面で編集リクエストとか出すときに使うやつです。
▼ ←こんなボタンを押すとにょいっとメニューが出てきて、リンク先に飛んだりできるやつですね。
このdropdownを使って、詳細な操作を行うためのリンク先の一覧を表示していました。なぜかiOSだけタッチしたリンクとは違うところに飛んじゃって非常に悩んだので、今回記事にしました。
なお、予め断っておくと、一応直ったものの「これだ！」という決め手を得るまでには至ってないので、だれかちゃんとした解決策とか、対処法を知っていたら教えてくれると嬉しいです……。
どんな問題？
まあタイトルのとおりなんですが、ドロップダウンでタッチ位置と遷移するリンクがずれてしまいます。
わかっていることを箇条書きにすると…。
- PCブラウザでは発生しない。
- Chromeのデベロッパーモードスマホをエミュレートしても発生しない。
- iOSでだけ発生する。
- Androidで発生するかはわからない（持っていないので）
こんな感じです。
うまく動かない原因
いろいろ調べた結果の予測です。
materializeのdropdownはopen()とclose()をアニメーションで表現してくれます。dropdownは範囲内や外をタッチすると、開いたドロップダウンメニューを閉じる動作をします。
またiOSはclickイベントが発生するのに少し時間がかかる（ダブルタップやロングタップと区別するため）らしいです。
そのためiOSではclickを判定するために少々の時間が必要で、その間にdropdownのcloseのアニメーションでリンクの表示位置がずれ、タッチした箇所とは違うリンクが選択されてしまったのではないかと予測しています。
（リンクのタッチとclickイベントはまた別じゃないかとも思ったんですが、どうなんでしょう……？）
実際、dropdownのリンクをタッチしたき時、タッチした項目よりも下の項目のリンク先にジャンプすることが多く、一番下の項目は基本的にジャンプできなかったです。
とった対策
dropdownのcloseはclickイベントで処理されるので、clickよりも早い段階でページ遷移をムリヤリさせてしまいました。具体的にはdropdown内のaタグでtouchendイベントが発生したら、ページ遷移するようにしました。
touchendはタッチした指が離れた瞬間に発生するイベントでclickイベントよりも発生タイミングが早かったので、今回採用しました。
// タッチイベント ドロップダウンリストのaタグのタッチエンドでhrefの先に飛ぶ
$(document).on('touchend','.dropdown-content li a',function(){
var href = $(this).attr('href');
window.location.href = href;
return false;
});
結論
というわけで、一応dropdownのタッチした項目のリンク先にジャンプできるようになったので、自分はそのままにしています。
ただ、ちゃんと対応するなら、アニメーションのせいではないかと疑っているので、closeのアニメーションの速度を非常に遅くするとか、アニメーションをなくしてしまうとか、dropdown内のclickでは閉じないようにするとかの対応があったと思います。
あとはGithubにmaterializeのプロジェクトがあったので、ちゃんとissueにあげておけばよかったかなと……（英語が怖くて逃げました)。
だれかちゃんとした解決方法しってたら教えて下さい（他人任せ）。