スマホのナビを展開する時に下のリンクを貫通してタップできてしまう問題
スマホサイトの展開式メニューを制作
メニュー展開の発火をjQueryで行い、アニメーション等の処理はCSS3でやってしまおう的なメニューを制作していました。 メニュー本体はz-indexをネガティブに設定してコンテンツが横にスライドすればメニューが出現する仕様です。 順調にメニューは実装できたのですが、iPhoneのChromeでメニューを展開する時のタップが下のリンク要素まで貫通し、想定外のページ遷移をしてしまいました。
js
|
1 2 3 4 5 |
jQuery(function($){ $('#spnav-open').on('touchstart', function(){ $('#wrap').toggleClass('spnav-vew'); }); }); |
setTimeoutで処理を遅らせて解決
touchstartをclickに変更すれば問題解決しましたがtouchstartやtouchendに比べて動作がもっさりするのでなんだかなぁ〜って感じです。 clickで正常な動作をするという事はタッチ後にラグさえあれば問題は解決するということなのでsetTimeoutを使ってもう1つ処理を追加してみました。
js
|
1 2 3 4 5 6 7 8 |
jQuery(function($){ $('#spnav-open').on('touchstart', function(){ $('#wrap').toggleClass('spnav-vew'); setTimeout(function(){ $('#spnav').toggleClass('pe-none'); },800); }); }); |
pointer-eventsでアンカーを無効化
メニュー本体に初期状態でpointer-events:none;付与しアンカーを無効化し、少し遅らせてtoggleClassでアンカーを有効にしました。
css
|
1 2 3 |
.pe-none{ pointer-events:none; } |
これでChromeでも思った通りの動作になりました！
- 2015年03月25日水曜日
- ：Naruhiko Wakai
comments