bxsliderでリンクが効かない - 失敗1 -
うまくいった記事はあるけど調査中に失敗したことや、間違った対処法を書いた記事ってあまり見ないなと最近思い、デバッグの最中に陥った問題も書くことにしようと思った。
堂々巡りしている人の助けになれば幸い。
概要
スライダーとモーダルを組み合わせた特殊な要件の構築中、スマホでスライダーの中のモーダルが立ち上がらなくなった。
さらにタップするとスライダーの操作も効かなくなってしまう。
モーダルはaタグをクリックすることで発動する。
症状が出た条件
内容
正解
原因は「aタグのタッチイベントが認識されていない」だった。
こちらのブログを参考に解決。
ありがとうございます。
bxSliderのスライド内のリンクが効かなくなった際の対処方 | ウェブマガジン カミナリ | 鳥取県米子市のホームページ制作・広告代理店・デザイン
イベントの解釈違いを矯正する対応なので、仕様が厳しい案件の場合は要注意。
Chromeのアップデートで変わる可能性も大いにあり。
以下、調査の足取り。
仮説
調査にあたり立てた仮説
仮説1 - 違ったけどきっかけになった
cssの擬似要素が邪魔していないか
よくあるケース。次項の処理順序をまず疑ったがシンプルに行こう、と思い開発モードでソースをさらう。
というのもSPで長押ししてもリンク要素を長押ししたときの挙動と違い、コピーコマンドが出なかったので「クリックできていない」と判断したから。
結果、覆っている不可視オブジェクトなどはなかったが、クリックした際にボタン(prev/next)に'.disabled'というclassが付与されていることに気づく。
bxsliderの中にある'Event handler for "touchstart"'の項目からコメントアウトして対応。
注:これも根本的な解決ではなく、スワイプでの挙動を制限しているので本来あまり良くはない。
結論：惜しいところまでいけていた
仮説2 - 違ったけど前向きに調査できた
jsの処理タイミングの問題か
これもよくあるケース。ready/load 各タイミングで必要なものだけ動くように微調整。
そもそも一部のiPhoneでちゃんと動くのでこれが原因とは考えにくい。
代わりにダラダラ書いていたものを配列化したり関数化したりしてデバッグしやすくした。
デバッグしやすいコードは心が折れにくくなって良い...。
結論：綺麗なコードだと調査もしやすい
仮説3 - 見当違い
発火元のDOMがjQueryで操作される(スライダーに構築される)ことが原因なのか - 動的要素とイベントの問題
冷静に考えればPCや一部のiPhoneでまともに動いているのだからそもそも違うはず。
それなのにためしに動的に追加したトリガーから、イベントが発火しないのを見て震えたりしていた。
俺は一体何をしていたんだ...。
ただ、動的要素に対し関数を初期化できるのか？(日本語あっているのか)は調査したいと思ったので収穫とする。
結論：完全な絶望のマッチポンプ
解決順序
- コンソールエラーが出ない
- SPでコピーコマンドが出ない
- スライダー領域をタップしただけでタッチイベントが不本意に走っていた
以上から「そもそもaタグのイベントが走っていない」と気づいて正解にたどり着いた。
よかった点と収穫
- 起きているイベントをclassから逆引きしたこと
- 初期化から疑ったこと(jsの仕組みをさらって再理解が深まった)
- 動的要素に対する関数の初期化を調べたいと思った
全体の感想として、心が折れなくなったのはでかい。
何かしら解決の糸口はきっとあると経験で知っていること、たくさんの経験から細分化していろんな面から試行できること。
それがまた新たに知識と方法論を与えてくれるのでこういった「うまくいかなかったケース」もたくさん書いていこうと思った。
