Javascript/css ドロワーメニュー外をクリックした時に、メニューを閉じれるようにしたい

前提・実現したいこと

WEBサイトのドロワーメニューをCSSとJavascriptで作成しております。
メニューオープン時、メニュー外クリックでも閉じれる機能をJavascriptで実装したいのですが、上手くいきません。

ハンバーガーボタンクリックによる開閉は実装済です。

発生している問題・エラーメッセージ

document.addEventListener('click'....で新たにfunctionを作ってみたが、
ボタンを押してもメニューがスライドして出てこない等上手くいかない。

該当のソースコード

HTML
1<section class="anime-renshu3">
2    <a class="drawer-menu">
3      <div></div>
4      <div></div>
5      <div></div>
6    </a>
7    <nav class="nav-menu">
8      <ul>
9        <li><a href="#">menu1</a></li>
10        <li><a href="#">menu2</a></li>
11        <li><a href="#">menu3</a></li>
12      </ul>
13    </nav>
14    <div class="anime-tate">
15      <h2>広大な空を旅しよう</h2>
16    </div>
17    <div class="overlay"></div>
18  </section>

css
1
2  /* anime-renshu3 */
3  .anime-renshu3 {
4    background: url(http://sozai.yutorilife.com/s19201200/photo/umi03.jpg);
5    background-position: top right;
6    background-size: cover;
7    height: 100vh;
8    position: relative;
9    overflow: hidden;
10    z-index: 3;
11  }
12
13  .anime-tate {
14    display: inline-block;
15    overflow: hidden;
16    position: absolute;
17    top: 50%;
18    left: 50%;
19    transform: translate(-50%, -50%);
20  }
21
22  .anime-tate h2 {
23    font-weight: 900;
24    font-size: 3vw;
25    color: #fff;
26    background: rgba(0,0,0,.5);
27    padding: 30px;
28    writing-mode: vertical-rl;
29    text-orientation: mixed;
30    visibility: hidden;
31  }
32
33  @keyframes tate-play {
34    from {
35      transform: translateY(-100%);
36    }
37
38    to {
39      transform: translateY(0);
40    }
41  }
42
43  @keyframes tate-mask {
44    from {
45      opacity: : translateY(0);
46    }
47
48    to {
49      transform: translateY(100%);
50    }
51  }
52
53  .tate-start {
54    animation-name: tate-play;
55    animation-duration: .3s;
56    animation-fill-mode: forwards;
57    animation-timing-function: ease;
58    position: relative;
59    visibility: visible !important;
60  }
61
62  .tate-start::before {
63    animation-name: tate-mask;
64    animation-duration: .5s;
65    animation-delay: .5s;
66    animation-fill-mode: forwards;
67    animation-timing-function: ease-in;
68    position: absolute;
69    content: '';
70    top: 0;
71    left: 0;
72    width: 100%;
73    height: 100%;
74    z-index: 1;
75    background: #fff;
76  }
77
78  /* .humburger-menu } */
79  .drawer-menu {
80    display: block;
81    width: 80px;
82    height: 80px;
83    background: #193374;
84    position: fixed;
85    top: 0;
86    right: 0;
87    transition: all .8s;
88    z-index: 8;
89  }
90
91  .drawer-menu div {
92    height: 1px;
93    width: 50%;
94    background: #fff;
95    position: relative;
96    top: 50%;
97    left: 50%;
98    transform: translate(-50%, -50%);
99    transition: .5s;
100  }
101
102  .drawer-menu div:nth-of-type(1) {
103    transform: translate(-50%, -10px);
104  }
105
106  .drawer-menu div:nth-of-type(3) {
107    transform: translate(-50%, 10px);
108  }
109  /* menu-open class add event*/
110  .drawer-menu.menu-open div:nth-of-type(1) {
111    transform: rotate(45deg) translate(-50%, 0px);
112    transform-origin: 0% 50%;
113  }
114
115  .drawer-menu.menu-open div:nth-of-type(2) {
116    opacity: 0;
117  }
118
119  .drawer-menu.menu-open div:nth-of-type(3) {
120    transform: rotate(-45deg) translate(-50%, 0px);
121    transform-origin: 0% 50%;
122  }
123
124  .nav-menu {
125    display: block;
126    width: 400px;
127    height: 100%;
128    position: fixed;
129    top: 0;
130    right: 0;
131    transform: translate(100%, 0);
132    transition: .3s ease-in-out;
133    background: rgba(25,51,116,.7);
134    z-index: 7;
135  }
136
137  .nav-menu ul li {
138    list-style: none;
139    padding: 30px;
140  }
141  .nav-menu ul li a {
142    color: #fff;
143    text-decoration: none;
144  }
145  .nav-menu.active {
146    transform: translate(0, 0);
147  }
148
149  .overlay {
150    position: absolute;
151    top: 0;
152    left: 0;
153    width: 100%;
154    height: 100%;
155    background: none;
156    position: fixed;
157    z-index:6;
158  }
159
160  .overlay.active {
161    background: rgba(0,0,0,.6);
162  }
163

Javascript
1    /* fullscreen subtitle load */
2    window.addEventListener('load', function() {
3      const element = document.querySelectorAll('.anime-renshu3');
4      element.forEach((items) => {
5        items.querySelector('.anime-tate h2').classList.add('tate-start');
6      });
7    });
8
9
10    /* humburger menu click */
11    document.querySelector('.drawer-menu').addEventListener('click', function() {
12      this.classList.toggle('menu-open');
13
14      const element = document.querySelector('.drawer-menu');
15      const elem = document.querySelector('.nav-menu');
16      const overlay = document.querySelector('.overlay')
17
18      if(elem.classList.contains('active')) {
19          elem.classList.remove('active');
20          element.style.background = '#193374';
21          overlay.classList.remove('active');
22      } else {
23        elem.classList.add('active');
24        /*ボタン背景透過処理*/
25        element.style.background = 'rgba(25,51,116,0)';
26        /*active時暗くなる*/
27        overlay.classList.add('active');
28      }
29    });

試したこと

document.addEventListener('click' function()...
で.nav-menuをremoveする処理を試しましたが、
.drawer-menuをクリックしてもメニューがスライドしてきません。

補足情報（FW/ツールのバージョンなど）

windows10 64bit
Chrome バージョン: 80.0.3987.122

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

回答3件

bodyをクリックした時に、
.anime-renshu3要素内のクリックじゃないか判別して、
.drawer-menuの要素を（JavaScriptで）クリックするコードを書けばよいです。

【event.curretTargetとevent.targetの違い - gsol-dev's blog】
http://gsol.hatenablog.com/entry/2013/12/04/event.curretTarget%E3%81%A8event.target%E3%81%AE%E9%81%95%E3%81%84

【Element.closest() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/closest

【Event() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Event/Event

jQuery のほうが簡単に書ける。
（※ 下記コードはメニューが開いているかどうかを確認していないため、閉じている時にほかのものをクリックしたらメニューが開きます）

js
1$( function() {
2  $( 'body' ).on( 'click', function( e ) {
3    var b = $( e.target ).closest( '#menu' ).length;
4    if ( b == 0 ) { // #menu 以外なら
5    	$( '#menu' ).trigger( 'click' );
6    }
7  } );
8  $( '#menu' ).on( 'click', function( e ) {
9    $( '#box' ).toggle();
10  } );
11} ); // 例
12```**動くサンプル：**[https://jsfiddle.net/v192e0bu/](https://jsfiddle.net/v192e0bu/)
13
14---
15【.on() | jQuery API Documentation】
16[https://api.jquery.com/on/](https://api.jquery.com/on/)
17
18【.trigger() | jQuery API Documentation】
19[https://api.jquery.com/trigger/](https://api.jquery.com/trigger/)
20
21【.closest() | jQuery API Documentation】
22[https://api.jquery.com/closest/](https://api.jquery.com/closest/)
23【EventTarget.dispatchEvent() - Web API | MDN】
24[https://developer.mozilla.org/ja/docs/Web/API/EventTarget/dispatchEvent](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/dispatchEvent)

投稿2020/03/01 10:39

編集2020/03/01 10:41

kei344

総合スコア69606

Nogeira

2020/03/01 16:41

申し訳ないです、今回はJavascriptのみでの実装を考えてます。教えて頂いた構文をちゃんと理解はできてないんですが、一応参考にして document.querySelector('body').addEventListener('click', function(e) { const element = document.querySelector('.drawer-menu'); const elem = document.querySelector('.nav-menu'); const overlay = document.querySelector('.overlay'); if(!$(e.target).closest('.drawer-menu').length) { elem.classList.remove('active'); element.style.background = '#193374'; overlay.classList.remove('active'); element.classList.remove('menu-open'); } }); と書いてそれっぽい動きにはなりましたが、これだとどこを押しても閉じてしまいます。