ヘッダーとかでサブメニューみたいなポップアップメニューを出したときに、他の部分をクリックして閉じるようにしたいときのお話

今回はタイトルが長いけどそういう感じのお話。
とりあえずポップアップとか出すっていうのは普通にさくっと実装出来るものだけど、
それを閉じるのは×ボタンや、出すためのリンクを再度クリックするといった場合になってしまうことが多い。

サイトのコンセプト的にそれでいいやっていう場合もあるし、
そうじゃないしっていうこともあったりすると思う。
ちなみにポップアップだけじゃなくて、スマホの横に配置するメニューなどの場合もそうしたいよね的な。

すごく抽象的でわかりづらいかもだけど、とりあえず今日はその話をば。

上の写真はうちで作ってるwww.partee.jpにて、ポップアップ形式のメニュー的な。
ここで名前の部分だけクリックしてポップアップを閉じるだけだと面倒であったりする。
出来たら何も無いところをクリックして閉じてくれたらうれしいなぁって思うわけで。
とりあえずその実装方法は下記になる的な。

//menu文字部分
$(".mymenu").on("click",function(e){
  e.preventDefault();

  $(".sub-menu").toggle();

  e.stopPropagation(); //これが重要
});

//閉じるための処理
$(document).click(function(e){
  $(".sub-menu").hide();
});

って感じ。
基本的には.mymenuをクリックしたら開いたり閉じたりするんだけど、
その中でe.stopPropagation()というものを使ってあげるとよい。
これはイベントをそこで止めるよ的な感じであるので、
$(document)のclickイベントが発動される事がないって感じ。

というかそもそも、閉じるための処理は$(document)にclickイベントを付与してあげるだけで充分なんだけど、
それだけにしてしまうと$(".mymenu")をクリックした際に、オープンして閉じてしまうということになってしまう。
だからe.stopPropagation()を使って、$(".mymenu")をクリックした際は、
$(".mymenu")に割当てられているイベントだけでイベント処理を終了するということにしてしまえばいいという感じ。

って感じで実は実装出来るので、そうやっていきましょう的な。
ただイベントの順番とかそういったものがあるので、
出来たら閉じるための処理は一番最後に書いてあげるのがよいかもみたいな。