javascript - 使用 Event.target 和类关闭屏幕外导航

Question

我需要一些帮助来理解 event.target 属性。

我创建了一个 nav，它在单击 button 时滑入和滑出。当 nav 在屏幕上时，它会添加 nav-open 类。我试图添加这样的功能，如果用户点击 除 nav 之外的任何地方，它就会关闭，所以我试图定位:

1. 类名
2. 用户点击

使用以下代码但它似乎不起作用:

    $(window).click(function(e) {
        if( nav.hasClass('nav-open') && e.target != nav ) {
            nav.removeClass('nav-open');
        }

    });

有人可以帮忙吗？下面是完整的片段。

$(document).ready(function() {
	
	var button = $('button');
	var nav = $('nav');
	
	button.click(function() {
		nav.toggleClass('nav-open');
	});
	
// 	$(window).click(function(e) {
// 		if( nav.hasClass('nav-open') && e.target != nav ) {
// 			nav.removeClass('nav-open');
// 		}
		
// 	});
	
	
	
	
});

* {
	padding: 0;
	margin: 0;
}

.container {
	border: 1px solid;
	height: 1000px;
	width: 100%;
	background-color: #ccc;
	position: relative;
	z-index: 1;
}

button{
	position: relative;
	left: 500px;
	top: 30px;
}

nav {
	height: 100vh;
	width: 300px;
	left: 0;
	top: 0;
	position: absolute;
	background-color: #444;
	z-index: 2;
	transform: translate3d(-300px,0,0);
	transition: all .4s ease;
}
.nav-open {
	transform: translate3d(0px,0,0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav></nav>
<div class="container">
	<button>click me</button>
</div>

Answer 1

您需要 event.stopPropagation() 来防止事件冒泡。

$(document).ready(function() {
	
	var button = $('button');
	var nav = $('nav');
	
	button.click(function() {
		nav.toggleClass('nav-open');
	});
	
  $("body").on("click", ".container", function(e){
    e.preventDefault();
    if($("nav").hasClass("nav-open")){
      $("nav").removeClass("nav-open");
    }
  }).on("click", "nav, button", function(){
    e.stopPropagation();
  })
	
	
	
	
});

* {
	padding: 0;
	margin: 0;
}

.container {
	border: 1px solid;
	height: 1000px;
	width: 100%;
	background-color: #ccc;
	position: relative;
	z-index: 1;
}

button{
	position: relative;
	left: 500px;
	top: 30px;
}

nav {
	height: 100vh;
	width: 300px;
	left: 0;
	top: 0;
	position: absolute;
	background-color: #444;
	z-index: 2;
	transform: translate3d(-300px,0,0);
	transition: all .4s ease;
}
.nav-open {
	transform: translate3d(0px,0,0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav></nav>
<div class="container">
	<button>click me</button>
</div>