【jQuery】クリックイベントで出現させた要素を、サイト上のどこをクリックしても閉じることができる　領域外クリック

jQueryにて、クリックイベントで出現させた要素を、再びクリックして要素を消す。
しかし、同じ要素ではなく、サイト上どこをクリックしてもその要素を消せる。

いわゆる　領域外クリック　、というやつですね。

今回はこれを紹介します。

実体験

サイトを模写していて手詰まった部分です。
虫眼鏡のアイコンをクリックすると、検索フォームがフェードインで出現します。
その検索フォームは、サイト上のどこをクリックしても、フェードアウトで消すことができる仕組みでした。

この実装に一苦労しました。

サンプルコード

jsファイルに下記のコードを記述して解決です。

ID名は、わかりやすいように日本語にしてあります。
そして、後ほどの解説のために、コードの各行の頭に《数字》を降ってあります。（実際のコードの記述には関係ありません）

《１》$(document).on('click', function(e) {
《２》if(!$(e.target).closest('#出現させる要素').length && !$(e.target).closest('#ボタンやアイコン').length){
《３》$('#出現させた要素').fadeOut();
《４》}else if($(e.target).closest('#ボタンやアイコン').length){
《５》if($('#出現させる要素').is(':hidden')){
$('#出現させる要素').fadeIn();
《６》}else{
$('#pop_up').fadeOut();
}
}
});

解説

※#ボタンやアイコンをクリックして、#出現させる/させた要素をフェードイン/アウトさせる、設定としています。

《１》クリックイベントを設定【.on('click', function(e)】

《２》クリックした場所を、lengthを使って判別します。

クリックした場所が#出現要素でもなく（&&）、#ボタン/アイコンでもなければ(「！」で否定します)、

《３》#出現させた要素をフェードアウトさせます。

《４》別条件→クリックした場所が#ボタン/アイコンの場合、

《５》#出現要素が隠れているのなら（':hidden')、フェードイン。

《６》そうでないのなら（出現しているなら）フェードアウト。

と言う意味合いですね。

今回はこちらのサイトを参考にさせていただきました。とてもわかりやすいですので参考にしてみてください。

https://to-benefit7.com/outofrange-popup-close/

セレクタ関連の記事も紹介しておきますね↓