javascript - 使用 .is() 目标 Canvas 外导航点击

Question

我正在创建一个在三种情况下关闭的 Canvas 外导航:

1. 用户切换导航按钮
2. 用户点击导航中的链接
3. 当导航打开时，用户点击导航以外的任何地方。

我的前两个条件有效，但第三个条件无效。下面是我的代码。我想要完成的基本上是以下内容: 检查 body 上的点击，如果点击是(在本例中).pageContainer 运行第二次检查以查看导航是否具有类“showMenu”并且标志为 == true

$(document).ready(function() {
	
	var button = $('.button');
	var ocn = $('.ocn');
	var test = $('.test');
	var flag = false;
	
	//toggle menu using just the button
	 button.click(function() {
		 if ( flag == false ) {
			 ocn.addClass('showMenu');
			 flag = true;
		 } else {
			 ocn.removeClass('showMenu');
			 flag = false;
		 }
	 });
	
	//close the menu clicking on a link
	test.click(function() {
		ocn.removeClass('showMenu');
		flag = false;
	});
	
	//close menu when click off canvas
	
  /*
  $('body').on('click', '.pageContainer', function(e) {
		
		if( ocn.hasClass('showMenu') && flag == true) {
			ocn.removeClass('showMenu');
			flag = false;
		}
		
	}); 
	*/
	
	
	
	
});

* {
	padding: 0;
	margin: 0;
}

.ocn {
	position: absolute;
	left: -300px;
	top: 0;
	width: 300px;
	height: 100vh;
	background-color: #ccc;
	transition: left .2s ease;
	z-index: 2;
	border: 1px solid;
}

.showMenu {
	left: 0px;
}

.pageContainer {
	height: 500px;
	width: 1000px;
	border: 1px solid;
	display: block;
	margin: 0 auto;
}

.button {
	height: 40px;
	width: 40px;
	border: 1px dashed;
	display: block;
	position: relative;
	left: 400px;
	cursor: pointer;
}

.test {
	cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ocn">
	<p class="test">here is some text for the menu</p>
</div>
<div class="pageContainer">
	<div class="button"></div>
</div>

Answer 1

您可以使用 e.target 属性来比较点击的内容。类似这样:

if(e.target == pageContainer[0])

您现在可以在单击 .pageContainer 时应用所需的逻辑。

$(document).ready(function() {
  var pageContainer = $('.pageContainer');
  var button = $('.button');
  var ocn = $('.ocn');
  var test = $('.test');
  var flag = false;

  //toggle menu using just the button
  button.click(function() {
    if (flag == false) {
      ocn.addClass('showMenu');
      flag = true;
    } else {
      ocn.removeClass('showMenu');
      flag = false;
    }
  });

  //close the menu clicking on a link
  test.click(function() {
    ocn.removeClass('showMenu');
    flag = false;
  });

  //close menu when click off canvas
  $('body').on('click', '.pageContainer', function(e) {
    if (e.target == pageContainer[0]) {
      //console.log('pageContainer was clicked')
      if (ocn.hasClass('showMenu') && flag == true) {
        ocn.removeClass('showMenu');
        flag = false;
      }
    };
  });





});

* {
  padding: 0;
  margin: 0;
}

.ocn {
  position: absolute;
  left: -300px;
  top: 0;
  width: 300px;
  height: 100vh;
  background-color: #ccc;
  transition: left .2s ease;
  z-index: 2;
  border: 1px solid;
}

.showMenu {
  left: 0px;
}

.pageContainer {
  height: 500px;
  width: 1000px;
  border: 1px solid;
  display: block;
  margin: 0 auto;
}

.button {
  height: 40px;
  width: 40px;
  border: 1px dashed;
  display: block;
  position: relative;
  left: 400px;
  cursor: pointer;
}

.test {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ocn">
  <p class="test">here is some text for the menu</p>
</div>
<div class="pageContainer">
  <div class="button"></div>
</div>