プログラミング

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

スポンサーリンク

クリック

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

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

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

実体験

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

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

 

サンプルコード

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

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

《1》$(document).on('click', function(e) {
《2》if(!$(e.target).closest('#出現させる要素').length && !$(e.target).closest('#ボタンやアイコン').length){
《3》$('#出現させた要素').fadeOut();
《4》}else if($(e.target).closest('#ボタンやアイコン').length){
《5》if($('#出現させる要素').is(':hidden')){
$('#出現させる要素').fadeIn();
《6》}else{
$('#pop_up').fadeOut();
}
}
});

解説

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

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

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

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

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

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

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

《6》そうでないのなら(出現しているなら)フェードアウト。

と言う意味合いですね。

 

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

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

 

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

アイキャッチ
【jQuery】対象要素(セレクタ) を2つ指定したいときの記述

続きを見る

スポンサーリンク

-プログラミング
-, , , , , , ,

© 2022 サカらいふ Powered by AFFINGER5