Javascript-форум - Скрытие меню при щелчке в любом месте экрана

Artemyi,
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style type="text/css">
.topnav {
  overflow: hidden;
	float: right;
	position: relative;
	z-index: 80;
	right: 50px;
    top: 42px;
	width: 40%;
	background: none;
}
.topnav a, .topnav button.icon {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  background: gray;
}
.topnav a:hover {
  color: black;
}
.active {
  background-color: gray;
  color: white;
}
.topnav .icon {
  display: none;
}
@media screen and (max-width: 2000px) {
	.topnav {
  display: block;
	}
  .topnav a {display: none;}
  .topnav button.icon {
    float: right;
    display: block;
	background: none;
	color:#000;
  }
  .topnav button.icon:hover{
	background: gray;
	color:#fff;
  }
.topnav  span.nameMenu {
    /*color: black;*/
    font-size: 15px;
    margin: 0px 7px 0 0;
}
.responsive  span.nameMenu {
	display:none;
}
}
@media screen and (max-width: 2000px) {
  .topnav.responsive {position: absolute;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
  .responsive i.fa.fa-bars {
    color: white;
}
  .fa {
	  /*color:black;*/
  }
}
@media screen and (max-width: 950px) {
	.topnav {
	position: absolute;
	width: 71%;
	right: 0;
	top: 20px;
	}
	.topnav.responsive {position: absolute;}
}
@media screen and (max-width: 800px) {
	.topnav  span.nameMenu {display:none;}
	.topnav.responsive a:first-child {
	  display: block;
  }
}
    </style>
  <script>
document.addEventListener("click", function(event) {
  var nav = document.querySelector(".topnav");
  var icon = event.target.closest(".icon");
  if (icon) {
    event.preventDefault();
    nav.classList.toggle("responsive");
  }
  if (event.target.closest(".topnav")) {
    return;
  }
  if (nav.classList.contains("responsive")) {
    nav.classList.remove("responsive");
  }
});
  </script>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
<button class="icon" ><span class="nameMenu">МЕНЮ</span><i class="fa fa-bars"></i></button>
</div>
</body>
</html>