はじめに
クリックイベントが検知されないときって、ほかのDOM要素が覆っていないかとか、z-indexの設定とかしか気にしていなかったんですが、
posinter-events: noneが設定されていたせいでクリックができないケースに遭遇したので備忘録としてメモします。
環境
- cordova (Cordova CLI) : 8.0.0
- Ionic Framework : ionic-angular 3.9.5
- iOS 13
発生した障害
iOS端末で検知、Ionicのドラムロール(ion-picker)を開いた状態でモーダル(ion-modal)も開くと、モーダル上のボタンが押下できなくなる
原因
ドラムロールを開いた時に適用されるCSSにpointer-events: noneが含まれていたため、クリックイベントが無効になっていた
修正方法
画面全体にかかっているpointer-events: noneによってタップイベントがすべてキャンセルされているため、pointer-events: autoを設定することでpointer-events: noneを解除した。
.disable-scroll { .ion-page { pointer-events: auto; } }
まとめ
クリックイベントを検出できないバグの時に、z-indexの設定を気にするだけでなく、pointer-events:noneになっている可能性も疑うべしという教訓を得た
