回答編集履歴

1 修正

yamato_hikawa

yamato_hikawa score 2010

2017/03/07 07:54  投稿

バブリングの制御をするケースとしては、
例えばモーダルを開いた時、
・モーダル以外をクリックしたら、モーダルを消したい
・モーダルをクリックしても何も起きない
この2つの条件を満たす必要があるのですが、
この2つの条件を満たす実装をするケースを考えます。
前者を実現するために bodyタグに対してモーダルを閉じるクリックイベントを設定するとします。
そうすると、通常、モーダル自身もbodyタグ内に存在するため、モーダルをクリックするとイベントがバブリングしていき、bodyまで到達するとします。
そうすると、通常、モーダル自身もbodyタグ内に存在するため、モーダルをクリックするとイベントがバブリングしていき、bodyまで到達します。
そのため結果的に「モーダルをクリックすると、モーダルが消える」挙動が起きてしまいます。
この挙動を制御するために、モーダル自体のクリックイベントとして、stopPropagation()を設定する必要があります。
これで、モーダルおよびその内側の要素をクリックしても、bodyまでイベントがバブリングしないので、モーダルが消えることはなくなります。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る