javascript - event.target 在 jQuery 代码中不能正常工作

Question

我坚持使用以下简单代码。

$(function() {

	'use strict';
	
	function header() {
		
		var openButton = $('.search_button'),
			  box = $('.box'),
			  closeButton		= $('.close');
		
		box.hide();

		function init() {
			
			initEvents();
		}
		
		function initEvents() {
			openButton.on('click', openBox);
			$(document).on('keyup', function(event) {
				if(event.keyCode === 27) {
					box.slideUp('normal');
				}
			});
		}
		
		function openBox(event) {
			
			if(event.target === closeButton[0]) {
				box.hide();

			} else if(event.target === openButton[0] || $(event.target).closest(box).length) {
				box.show();	
			} 
			
			else {
				box.hide();
			}
		}
		
		init();
	}
	
	header();
});

.box {
  width:500px;
  height:500px;
  background-color:red;
  position:relative;
}

.close {
  width:80px;
  height:80px;
  background-color:orange;
  position:absolute;
  top:0;
  right:0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header_search">
	<form action="search.php" method="post">
		<input type="text" placeholder="" id="main_search" class="search_button">
	</form>
</div>

<div class='box'>
  <div class='close'></div>
</div>

我的意图是，当我在 DIV 外部单击时，它会关闭，单击时“关闭”DIV 会关闭红色主 div。

代码，slidesDown 框 div 和转义键 slideup。

但是关闭和点击外部关闭红色div是行不通的。

谁能帮我解释一下代码

感谢和问候

杰夫

Answer 1

您仅在 .search_button 中使用事件处理程序单击，您必须在您的正文中使用它。

    function initEvents() {
        $(body:not('#header_search')).on('click', openBox);
        $(document).on('keyup', function(event) {
            if(event.keyCode === 27) {
                box.slideUp('normal');
            }
        });
    }