この記事について

今回は、Webページの模写の一環でモーダルウィンドウを実装しようとした際に起きた予期せぬ挙動とその解決方法を備忘録として残しておこうと思います。

やりたいこと、前提条件・環境など

実装したかったのは以下の2点です。

使用言語はHTML、CSS、JavaScriptです。
ブラウザはGoogle Chromeを利用し、VSCodeの拡張機能であるLive Serverを利用して動作確認をしました。

まず以下のコードを実行し動作を確認しました。

See the Pen Untitled by junpei osano (@junpei314) on CodePen.

意図した通りに動いた点

意図しない挙動をした点

上記の結果を踏まえ以下のようにコードを変更したところ、うまく動作するようになりました。

結論としては意図しない挙動の２点ともバブリングが原因だということがわかりました。

「ウィンドウ自体をクリックするとウィンドウが閉じる」の原因
- 表示されるウィンドウの親要素に対してクリックイベントが設定されていたため、バブリングが発生しウィンドウが非表示になった
「とじるボタンをクリックしてもウィンドウが閉じない」の原因
- 「とじる」ボタンとその親要素にクリックイベントとしてtoggle()が設定されていた。toggle()は要素の表示と非表示を切り替えるメソッドである。「とじる」ボタンを押した際にクリックイベントのtoggle()が実行され、バブリングにより親要素のtoggle()も実行されていたため、ウィンドウが非表示にならなかった

上記の原因を解消するために以下の変更を行いました。

今回はバブリングが原因の意図しない挙動について紹介しました。
今回はイベントの伝播を止める形でモーダルウィンドウを実装しましたが、バブリングを止めることで起きる悪影響もあるみたいなのでバブリングを止めずに実装できる方法を模索してみようと思います。