特定の要素外をクリックすることで処理を発動させる時、対象となる要素を複数指定したい。

前提・実現したいこと

とあるランディングページの模写をしており、調べてもわからない箇所があるためご教授賜りたいです。

JavaScriptで下記のことを実装しようとしています。

・ヘッダー内のメニューボタンをクリックする→メニュー画面が開く
・開いたメニュー画面以外、かつヘッダー外の任意の場所をクリックする→メニュー画面が閉じる

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

JavaScriptの理論演算子で、クリック位置が上記のどちらでもない場合を発動条件として指定したつもりです。
クリックファンクションにおいてclosest()で親要素を取得し、除外したい要素として'header'と、メニュー画面である'.hide-searchbox-a'を指定しました。

しかし、headerに対しては除外要素として反応するものの.hide-searchbox-aに対しては反応してくれません。

該当のソースコード

html
1<!doctype html>
2<html>
3	<head>
4		<meta charset="utf-8">
5		<title>AirBnb</title>
6		<link href="teststyle.css" rel="stylesheet" type="text/css">
7	</head>
8
9    <body id="body">
10        <div class="wrapper" id="wrapper">
11
12            <header>
13                <div class="header-elements">
14
15                    <div class="header-center">
16                        <div class="header-center-box">
17                            <button class="menu-1 btn-s" >
18                                <div class="menu-inner">
19                                    メニュー1
20                                </div>
21                            </button>
22
23                            <span class="btn-border"></span><!--.btn-border-->
24
25                            <button class="menu-2 btn-s">
26                                <div class="menu-inner">
27                                    メニュー2
28                                </div>
29                            </button>
30
31                            <span class="btn-border"></span><!--.btn-border-->
32
33                            <div class="menu-search">
34                                <button class="menu-3 btn-s">
35                                    <div class="menu-inner">
36                                        メニュー3
37                                    </div>
38                                </button>
39                                <button class="btn-search">
40                                    <div class="search-icon btn-s">
41                                        pic
42                                    </div><!--.search-icon-->
43                                </button><!--.btn-search-->
44                            </div><!--.menu-search-->
45                        </div><!--.header-center-box-->
46                        <div class="hide-searchbox-a" id="hide-searchbox-a">
47                            <div class="hide-searchbox-b">
48                                <div class="hide-searchbox-c">
49                                    <div class="hide-box1-a">
50                                        <div class="hide-box1-b">
51                                            <div class="hide-box1-left">
52                                                    <div class="btn-one">                                                      
53                                                        ボタン１
54                                                    </div><!--.btn-one-->
55                                                    <div class="btn-two">
56                                                        ボタン２
57                                                    </div><!--.two-->
58                                            </div><!--.hide-box1-a-l-->
59                                            <div class="hide-box1-right">
60                                                <div>
61                                                    <a class="btn-link" href="#">
62                                                        <div>
63                                                            リンク
64                                                        </div>
65                                                    </a><!--.btn-link-->
66                                                </div>
67                                            </div><!--.hide-box1-a-r-->
68
69                                        </div><!--.hide-box1-b-->
70                                    </div><!--.hide-box1-a-->
71
72                                </div><!--.header-searchbox-c-->
73                            </div><!--.header-searchbox-b-->
74                        </div><!--.header-searchbox-a-->
75
76                    </div><!--.header-center-->
77
78                </div><!--.header-elements-->
79            </header>
80
81            <main>
82                <div class="space">
83                    コンテンツ１
84                </div>
85                <div class="space">
86                    コンテンツ2
87                </div>
88    
89            </main>
90
91           
92
93
94        </div><!--.wrapper-->
95
96        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
97        <script src="script.js"></script>
98
99    </body>
100</html>

css
1@charset "utf-8";
2/* CSS Document */
3
4*{
5    margin: 0;
6    padding:0;
7}
8
9img{
10	vertical-align:bottom;
11	width:100%;
12    height:100%;
13    object-fit:cover;
14}
15
16.clearfix:after{
17	content:"";
18	display:block;
19	clear:both;
20}
21
22a {
23	text-decoration: none;
24	color:inherit;
25}
26
27button{
28    border:none;
29    background: transparent ;
30    outline :none; 
31}
32
33body{
34    font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
35    font-size: 14px;
36    line-height: 1.43;
37    color: #222;
38    background-color: #fff;
39    margin: 0;
40    -webkit-font-smoothing: antialiased;
41    -moz-osx-font-smoothing: grayscale;
42    box-sizing: border-box;
43}
44
45body::-webkit-scrollbar{
46    display:none
47}
48
49/*============↓ここからheader============*/
50header{
51    height:80px;
52    width:100%;
53    display: flex;
54    position: fixed;
55    top:0;
56    border-bottom: solid 1px #ddd;
57    background-color: aquamarine;
58}
59
60.header-elements{
61    width: 100%;
62    padding: 0 80px;
63    height:100%;
64    margin: auto;
65    display: flex;
66    justify-content: space-between;
67    background-color: bisque;
68}
69
70/*----↓ここからheader-center----*/
71.header-center{
72    background-color: brown;
73    width:100%;
74    text-align: center;
75    transform-origin: 0% 0%;
76    max-width: 2520px;
77}
78
79.header-center-box{
80    display: inline-flex;
81    align-items: center;
82    text-align: left;
83    background-color:#fff;
84    border-radius:40px; 
85    box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 5%);
86    --lilsearch-field-text_min-width: 80px;
87    max-width: 100%;
88    vertical-align: middle;
89    border:solid 1px #ddd;
90    min-width: 348px;
91    box-sizing: border-box;
92    transform:translateY(16px);
93}
94
95.menu-1,.menu-2,.menu-3{
96    height: 48px;
97    display: flex;
98    align-items: center;
99}
100
101.menu-inner{
102    padding:0 16px;
103    white-space: nowrap;
104}
105
106.menu-1{
107    font-weight:bold;
108    padding-left: 8px;
109    border-top-left-radius: inherit;
110    border-bottom-left-radius: inherit;
111    background-color: aqua;
112}
113
114.menu-2{
115    font-weight:bold;
116    background-color: aqua;
117}
118
119.menu-search{
120    display: flex;
121    align-items: center;
122}
123
124.menu-3{
125    border-top-right-radius: inherit;
126    border-bottom-right-radius: inherit;
127    padding-right: 8px;
128    background-color: aqua;
129}
130
131.search-icon{
132    width:2.4em;
133    background-color: aqua;
134}
135
136.btn-border{
137    flex: 0 0 1px;
138    height: 24px;
139    width: 1px;
140    background-color:#ddd;
141}
142/*----↓ここから.hide-searchbox----*/
143
144.hide-searchbox-a{
145    background-color: rgba(200,200,200,1);
146    box-sizing: border-box;
147    opacity: 0;
148    pointer-events: none;
149    visibility: hidden;
150    padding-left:40px;
151    padding-right:40px;
152}
153
154.header-searchbox-b{
155    padding-bottom:16px;
156}
157.header-searchbox-c{
158    display: flex;
159    flex-direction: column;
160}
161
162.hide-box1-a{
163    font-weight: 600;
164    font-size: 16px;
165}
166
167.hide-box1-b{
168    display: flex;
169    justify-content: center;
170    height: 80px;
171}
172
173.hide-box1-left,
174.hide-box1-right{
175    background-color: bisque;
176    display: flex;
177    align-items: center;
178}
179
180.btn-one,
181.btn-two{
182    font-weight: 600;
183    background-color: aqua;
184    margin: 10px 16px;
185}
186
187
188
189.btn-online-experience-b{
190    background-color:aquamarine;
191    display: block;
192    padding: 10px 16px;
193}
194
195/*----↑ここまで.hide-searchbox----*/
196
197/*----↓ここから.hide-searchbox.toggle----*/
198
199.hide-searchbox-a.toggle{
200    position: absolute;
201    left:0;
202    top:0;
203    width: 100vw;
204    z-index: 2;
205    pointer-events: none;
206    transform: none;
207    opacity: 1;
208    visibility: visible;
209    height:500px;
210}
211
212/*----↑ここまで.hide-searchbox.toggle----*/
213
214/*----↑ここまでheader-center----*/
215
216
217/*============↑ここまでheader============*/
218
219
220main{
221    margin-top: 80px;
222}
223
224.space{
225    width:90%;
226    margin: auto;
227    height:500px;
228    background-color:aquamarine;
229    display: block;
230}
231

JavaScript
1
2const searchBox = document.querySelector('.hide-searchbox-a');
3
4document.addEventListener('DOMContentLoaded', function(){
5	function menuClick(){
6		searchBox.classList.add('toggle');
7	}
8
9	const searchBtn = document.getElementsByClassName('btn-s');
10	for(let i = 0; i < searchBtn.length; i++) {
11    	searchBtn[i].addEventListener('click', menuClick, false);
12	}   
13}, false);
14
15
16let searchClose = document.getElementById('wrapper');
17
18searchClose.addEventListener('click', (event) => {
19  if((event.target.closest('header') === null)&&(event.target.closest('.hide-searchbox-a') === null)){
20    searchBox.classList.remove('toggle');
21  }
22});

試したこと

試しにほかの要素を仮で作って、そのクラス名を.hide-searchbox-aの代わりにif条件内に入れてみたところ、こちらは作用しました。
しかしなぜ.hide-searchbox-aだと反応してくれないのかわからず、、
勉強したての見苦しいコードで大変恐縮ですが、ご教授のほどよろしくお願いいたします。

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

回答1件

ベストアンサー

.hide-searchbox-a.toggleにpointer-events: none;でマウスイベントを無効にしているので、クリックは透過して下の要素(この場合はmain)をクリックしたことになります。
pointer-events: auto;にしてマウスイベントを受け取るようにすればご希望の動作になるでしょう。

css
1.hide-searchbox-a.toggle{
2    position: absolute;
3    left:0;
4    top:0;
5    width: 100vw;
6    z-index: 2;
7    pointer-events: autoe; /* 修正 */
8    transform: none;
9    opacity: 1;
10    visibility: visible;
11    height:500px;
12}