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。

代码，slideDown盒子div和转义键的幻灯片。

但是关闭并点击外面以关闭红色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');
            }
        });
    }