JS 要素以外をクリックで要素を閉じる

発生している問題

サイドメニューとしてヘッダー内にドロワーメニューを作っています。
クリックで要素の開閉までは正常に動きますが、
要素が開いている状態で要素外をクリックした時に要素を閉じる、と言う動作を実現できずにいます。

###実現したいこと
・表示状態の要素外をクリックした時に要素が閉じるようにしたい。そのための記述方を知りたいです。

該当のソースコード

js
1//header:　drawer
2$(function(){
3  var $dropdown = $('.is-adminBar__drawerNavBtn');
4  var DURATION = 200;
5  function fadeOutMenu(){
6    $dropdown.removeClass('is-active')
7      .next('.adminBar__drawerNav')
8      .stop()
9      .slideUp(DURATION);
10  }
11  function toggleMenu(){
12    var $self = $(this);
13    if(!$self.hasClass('is-active')){
14      fadeOutMenu();
15    }
16    $self.toggleClass('is-active')
17      .next('.adminBar__drawerNav')
18      .stop().slideToggle(DURATION);
19  }
20  $dropdown.on('click', toggleMenu);
21//要素外クリックで閉じる処理をしたい↓↓↓
22  $(document).on('click touchend', function(event) {
23    if (!$(event.target).closest('body').length) {
24      fadeOutMenu();
25    }
26  });
27});

HTML
1<body>
2<header>
3〜略〜
4<ul class="adminBar__secondary modFlexBox--oneHalf modFlexBox">
5  <li class="adminBar__secondary__item">
6    <button type="button" class="is-adminBar__drawerNavBtn"><img src="./images/common/icon_ad-item.svg" alt="" class="is-adminBar__drawerNavBtn__iconSVG"></button>
7    <ul class="adminBar__drawerNav">
8      <li class="adminBar__drawerNav__item"><a href="#" class="adminBar__drawerNav__item__link">コンテンツ作成</a></li>
9      <li class="adminBar__drawerNav__item"><a href="#" class="adminBar__drawerNav__item__link">アカウント申請</a></li>
10      <li class="adminBar__drawerNav__item"><a href="#" class="adminBar__drawerNav__item__link">ほにゃら申請</a></li>
11      <li class="adminBar__drawerNav__item"><a href="#" class="adminBar__drawerNav__item__link">ほにゃら申請</a></li>
12    </ul>
13  </li>
14  <li class="adminBar__secondary__item">
15    <button type="button" class="is-adminBar__drawerNavBtn"><img src="./images/common/icon_help.svg" alt="" class="is-adminBar__drawerNavBtn__iconSVG"></button>
16    <ul class="adminBar__drawerNav">
17      <li class="adminBar__drawerNav__item"><a href="#" class="adminBar__drawerNav__item__link">デモサイト</a></li>
18      <li class="adminBar__drawerNav__item"><a href="#" class="adminBar__drawerNav__item__link">マニュアル</a></li>
19    </ul>
20  </li>
21  <li class="adminBar__secondary__item">
22    <button type="button" class="is-adminBar__drawerNavBtn"><img src="./images/common/icon_user.svg" alt="" class="is-adminBar__drawerNavBtn__iconSVG"></button>
23    <ul class="adminBar__drawerNav">
24      <li class="adminBar__drawerNav__item adminBar__drawerNav__item--userName modFlexBox"><span class="adminBar__drawerNav__item--userName__item">じゅげむじゅげむごこうのすりきれ</span></li>
25      <li class="adminBar__drawerNav__item"><a href="#" class="adminBar__drawerNav__item__link">マイページ</a></li>
26      <li class="adminBar__drawerNav__item"><a href="#" class="adminBar__drawerNav__item__link">ログアウト</a></li>
27    </ul>
28  </li>
29</ul>
30</header>
31<nav>左固定メニュー</nav>
32<main>メインコンテンツ</main>
33<footer>フッター</footer>
34</body>

css
1/*adminBar__secondary: right*/
2.adminBar__secondary {
3  position: relative;
4    -webkit-box-pack: end;
5    -ms-flex-pack: end;
6  justify-content: flex-end;
7}
8.adminBar__secondary__item {
9  position: relative;
10}
11.adminBar__secondary__item:nth-of-type(n+2) {
12  margin-left: 15px;
13}
14/*adminBar__drawerNav*/
15.is-adminBar__drawerNavBtn {
16  margin-top: 4px;
17}
18.is-adminBar__drawerNavBtn__iconSVG {
19  width: 28px;
20}
21.adminBar__drawerNav {
22  background: #32373c;
23  display: none;
24  padding: 5px 0 4px;
25    top: 44px;
26    right: 0;
27  position: absolute;
28  overflow: hidden;
29    min-width: 160px;
30    max-width: 160px;
31  width: 100%;
32}
33.adminBar__drawerNav__item {}
34.adminBar__drawerNav__item--userName {
35  color: rgba(240,245,250,1);
36  font-size: 1.2rem;
37  line-height: 1.4;
38  padding: 6px 10px 6px 16px;
39}
40.adminBar__drawerNav__item--userName:after {
41  content: 'さん';
42}
43.adminBar__drawerNav__item--userName__item {
44  display: inline-block;
45    min-width: 110px;
46    max-width: 110px;
47  width: 100%;
48  overflow: hidden;
49  text-overflow: ellipsis;
50  white-space: nowrap;
51}
52.adminBar__drawerNav__item__link {
53  color: rgba(240,245,250,.7);
54  display: block;
55  font-size: 1.3rem;
56  line-height: 1.4;
57  padding: 6px 16px;
58  white-space: nowrap;
59}
60.adminBar__drawerNav__item__link:hover {
61  color: #fd8a39;
62}

試したこと

header以下navやmainなどコンテンツがなければ正常に動いたため、
以下のclosest('body')部分を書き換えれば動くかと思ったのですがうまく行きませんでした。

js
1$(document).on('click touchend', function(event) {
2  if (!$(event.target).closest('body').length) {
3    // ここに処理;
4    fadeOutMenu();//関数呼びだし
5  }
6});

行動規範の内容に同意します

回答3件

イベントのバブリングの仕様について勉強してください。
ざっと調べたらこんな感じのサイトを見つけたので参考にしてみてください。
[jQuery]イベントのバブリングって何？ - Taneppa!

念の為バブリングについて解説します
このようなHTMLがあるとしましょう

html
1<body>
2  <article>
3    <section>
4      <ul>
5        <li>太郎</li>
6        <li>次郎</li>
7        <li>三郎</li>
8      </ul>
9    </section>
10  </article>
11</body>

ここで「太郎」という文字の上でマウスをクリックした場合
私は何をクリックしましたか？

<li>太郎</li>は当然ですが、
ulはliを内包しているし、sectionはulを内包しているじゃないか！どうなの？
内包したliを上から突いているということは、外側のulやsection等も全て突いているということになるのです。

ですので、ブラウザは以下のように流れるようなイベント発火が行われます

li
ul
section
article
body

つまり全てクリックされたよという扱いになります。

このバブリングを使ってどう質問文を実現させるかについて説明します。

JavaScriptには
event.stopPropagationという機能が用意されており

li <- このイベントで実行した関数内でevent.stopPropagationを実行
ul <- せき止められたので実行されない
section <- せき止められたので実行されない
article <- せき止められたので実行されない
body <- せき止められたので実行されない

このようにイベントの流れるような発火をせき止める事が可能です。

event.stopPropagation自体はJavaScriptの機能ですが、
jQueryを併用したイベント内でもこれにアクセスして活用出来ますので、
jQuery stopPropagationみたいなワードで検索すれば使い方はすぐに思いつくでしょう。

body等の上の方でドロワーメニューを強制的に解除してしまうようなコードを書いておき、
ドロワーメニューのulなんかでstopPropagationを実行すれば

要望通りの外をクリックしたらドロワーメニューは閉じるが、
ドロワーメニュー内をクリックしても閉じないという挙動は実現出来るはずです。

ただし、このイベントのバブリングを堰き止めてしまうという実装は
強制力が強く、他の機能と衝突する可能性もありますので、
高機能なWebサイトを構築する場合は、上手く設計して干渉しないようにしてあげてください。

投稿2020/02/03 03:03

miyabi-sun

総合スコア21203

crigw

2020/02/03 03:50

今回は別の方法で解決しましたが、大変参考になりました。ありがとうございます。

行動規範の内容に同意します

ベストアンサー

いったい何をしているコードなのかを考えたほうがいいです。

jQuery
1    //if (!$(event.target).closest('body').length) {
2    if (!$(event.target).closest('.adminBar__secondary__item').length) {

https://api.jquery.com/closest/

投稿2020/02/03 03:01

x_x

総合スコア13749

crigw

2020/02/03 03:48

何をしているのかが調べても見つけることができず（わかる前提の説明が多く）、すみませんでした… 無事に動きました、ありがとうございます！

行動規範の内容に同意します

HTML
1
2<header>
3<ul class="adminBar__secondary modFlexBox--oneHalf modFlexBox">
4  <li class="adminBar__secondary__item">
5    <button type="button" class="is-adminBar__drawerNavBtn"><img src="./images/common/icon_ad-item.svg" alt="" class="is-adminBar__drawerNavBtn__iconSVG"></button>
6    <ul class="adminBar__drawerNav">
7      <li class="adminBar__drawerNav__item" id=hoge><a href="#" class="adminBar__drawerNav__item__link">コンテンツ作成</a></li>
8      <li class="adminBar__drawerNav__item"><a href="#" class="adminBar__drawerNav__item__link">アカウント申請</a></li>
9      <li class="adminBar__drawerNav__item"><a href="#" class="adminBar__drawerNav__item__link">ほにゃら申請</a></li>
10      <li class="adminBar__drawerNav__item"><a href="#" class="adminBar__drawerNav__item__link">ほにゃら申請</a></li>
11    </ul>
12  </li>
13  <li class="adminBar__secondary__item">
14    <button type="button" class="is-adminBar__drawerNavBtn"><img src="./images/common/icon_help.svg" alt="" class="is-adminBar__drawerNavBtn__iconSVG"></button>
15    <ul class="adminBar__drawerNav">
16      <li class="adminBar__drawerNav__item"><a href="#" class="adminBar__drawerNav__item__link">デモサイト</a></li>
17      <li class="adminBar__drawerNav__item"><a href="#" class="adminBar__drawerNav__item__link">マニュアル</a></li>
18    </ul>
19  </li>
20  <li class="adminBar__secondary__item">
21    <button type="button" class="is-adminBar__drawerNavBtn"><img src="./images/common/icon_user.svg" alt="" class="is-adminBar__drawerNavBtn__iconSVG"></button>
22    <ul class="adminBar__drawerNav">
23      <li class="adminBar__drawerNav__item adminBar__drawerNav__item--userName modFlexBox"><span class="adminBar__drawerNav__item--userName__item">じゅげむじゅげむごこうのすりきれ</span></li>
24      <li class="adminBar__drawerNav__item"><a href="#" class="adminBar__drawerNav__item__link">マイページ</a></li>
25      <li class="adminBar__drawerNav__item"><a href="#" class="adminBar__drawerNav__item__link">ログアウト</a></li>
26    </ul>
27  </li>
28</ul>
29</header>
30<nav>左固定メニュー</nav>
31<main>メインコンテンツ</main>
32<footer>フッター</footer>
33<div id=close></div> <!--これ追加-->
34

css
1
2.adminBar__secondary {
3  position: relative;
4    -webkit-box-pack: end;
5    -ms-flex-pack: end;
6  justify-content: flex-end;
7}
8.adminBar__secondary__item {
9  position: relative;
10}
11.adminBar__secondary__item:nth-of-type(n+2) {
12  margin-left: 15px;
13}
14/*adminBar__drawerNav*/
15.is-adminBar__drawerNavBtn {
16  margin-top: 4px;
17}
18.is-adminBar__drawerNavBtn__iconSVG {
19  width: 28px;
20}
21.adminBar__drawerNav {
22  background: #32373c;
23  display: none;
24  padding: 5px 0 4px;
25    top: 44px;
26    right: 0;
27  position: absolute;
28  overflow: hidden;
29    min-width: 160px;
30    max-width: 160px;
31  width: 100%;
32  z-index: 100 /*これ追加*/
33}
34.adminBar__drawerNav__item {}
35.adminBar__drawerNav__item--userName {
36  color: rgba(240,245,250,1);
37  font-size: 1.2rem;
38  line-height: 1.4;
39  padding: 6px 10px 6px 16px;
40}
41.adminBar__drawerNav__item--userName:after {
42  content: 'さん';
43}
44.adminBar__drawerNav__item--userName__item {
45  display: inline-block;
46    min-width: 110px;
47    max-width: 110px;
48  width: 100%;
49  overflow: hidden;
50  text-overflow: ellipsis;
51  white-space: nowrap;
52}
53.adminBar__drawerNav__item__link {
54  color: rgba(240,245,250,.7);
55  display: block;
56  font-size: 1.3rem;
57  line-height: 1.4;
58  padding: 6px 16px;
59  white-space: nowrap;
60}
61.adminBar__drawerNav__item__link:hover {
62  color: #fd8a39;
63}
64/* ここから */
65#close {
66  position: absolute;
67  top: 0;
68  left: 0;
69  width: 100vw;
70  height: 100vh;
71  z-index: 50;
72  display: none
73}
74/* ここまで追加 */

jQuery
1
2$(function(){
3  var $dropdown = $('.is-adminBar__drawerNavBtn');
4  var DURATION = 200;
5  function fadeOutMenu(){
6    $dropdown.removeClass('is-active')
7      .next('.adminBar__drawerNav')
8      .stop()
9      .slideUp(DURATION);
10    $('#close').css('display', 'none'); //ここと
11  }
12  function toggleMenu(){
13    var $self = $(this);
14    if(!$self.hasClass('is-active')){
15      fadeOutMenu();
16    }
17    $self.toggleClass('is-active')
18      .next('.adminBar__drawerNav')
19      .stop().slideToggle(DURATION);
20      $('#close').css('display', 'block'); //ここと
21  }
22  $dropdown.on('click', toggleMenu); 
23  //ここにあったの削除
24  $('#close').on('click', function(){ //ここから
25    fadeOutMenu();
26  }); //ここまで追加
27});
28