自分以外の領域がクリックされたら、ポップアップを閉じるような jQuery の処理例。

ポップアップを表示して、その領域外をクリックされた時にそのポップアップを閉じたい、といった処理はよくあります。
Stackoverflow などでよくある処理としては、

• クリックイベントを全検知して、Pop up を閉じるような処理をしてしまう。
• もし自分自身だったら stopPropagation() して、イベント伝播しなくする。

という処理があるのですが、若干危険な処理です。理由は後述します。

今回のアプローチとしては

• クリックイベントを全検知 (ついでに touch device も対応)
• もし、そのクリックが自分を含まないものであれば *1 閉じる処理をする。

$(document).on('click touchend', function(event) {
  if (!$(event.target).closest('#target').length) {
    // ここに処理;
  }
});

なぜ安易に stopPropagation() するべきではないのか

• stopPropagation() すると、他の DOM に click が伝播しなくなります。
  • 他の DOM でも click event を検知する必要があるものがあるかもしれません。
    • ポップアップやモーダルが開かれている時にこれらの動作に問題はないのでしょうか
• stopPropagation() は global に影響する処理なので、一箇所これがあるだけでコードの保守性が大幅に下がってしまう。

詳しくは https://css-tricks.com/dangers-stopping-event-propagation/

*1:厳密には https://api.jquery.com/closest/