ハンバーガーメニューで背景をクリックしても閉じたい

<!-- ハンバーガーメニューコード例 -->
<div class="hmn flex">
        <span class="anime"></span>
</div>

<!-- 表示・非表示対象のメニューコンテンツコード例 -->
<div id="overlay_close_trigger" class="overlay">
    <nav id="global" class="cont_box">
            <!-- WPメニューの場合 -->
            <?php wp_nav_menu( array(
                'theme_location' => 'gnav' ) );
            ?>
	</nav>
</div>

jQuery(function($){

$(function () {
		//メニューアイコンクリックでクラス操作
		$('.hmn').on('click', tClass);

		//ポップアップ時にクリックした対象の親要素に#globalがなければ（#globalより外側なら）閉じる
		$('#overlay_close_trigger').on('click', function(event) {
			if (!$(event.target).closest('#global').length) {
				tClass();
			}
		});

		function tClass() {
			$('body').toggleClass('mnopen'); 
			$('html').toggleClass('fixed'); //背景スクロール対策
		}

});

});

html {
    &.fixed {
        overflow: hidden;
        height: 100vh;
    }
}

/* 基本設定 */
.anime {
    transition: all .3s;
}
.flex {
    display: flex; 
    flex-wrap:nowrap; 
    justify-content:center; 
    align-items:flex-start; 
    align-content:flex-start;
}
.cont_box {
    width: 90%;
    margin: 0 auto;
}
/* メニュー独自 */
.hmn {
    background: #000;
    width: 80px;
    height: 70px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    z-index: 3;
    span {
        display: inline-block;
        background: #fff;
        width: 35px;
        height: 2px;
        position: relative;
        &::before {
            content: "";
            background: #fff;
            height: 2px;
            width: 35px;
            position: absolute;
            bottom: 10px;
            transition: .3s;
        }
        &::after {
            content: "";
            background: #fff;
            height: 2px;
            width: 35px;
            position: absolute;
            top: 10px;
            transition: .3s;
        }
    }
}

.overlay {
    position: fixed;
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.95);
    opacity: 0;
    pointer-events: none;
    transition: .6s all;
    nav#global {
        opacity: 0;
        
    }
}

.mnopen {
    .overlay {
        opacity: 1;
        pointer-events: auto;
        z-index: 2;
        background-color: rgba(255, 255, 255, 0.95);
        nav#global {
            justify-content: center;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            position: absolute;
            border: solid 1px #000;
            box-shadow: 2px 2px 3px #ddd;
            background: #fff;
            padding: 3em 2em;
            opacity: 1;
            transition:opacity .5s;
            box-sizing: border-box;
            li {
                margin-bottom: 0.7em;
                text-align: center;
                &:last-child {
                    margin-bottom: 0;
                }
                a {
                    display: inline-block;
                    @extend .nl;
                    text-align: center;
                    box-sizing: border-box;
                    width: 80%;
                }
            }
        }
    }
    .hmn {
        span {
            background: #000;
            &::before {
                transform: rotate(45deg);
                width: 40px;
                top: 0;
                background: #fff;
                left: -2px;
            }
            &::after {
                transform: rotate(-45deg);
                width: 40px;
                bottom: 0;
                top: auto;
                background: #fff;
                left: -2px;
            }
        }
    }
}

.test .inner {
    position: fixed;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100 - 75px);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}