jQueryコードでevent.targetが正しく機能しない

Question

次の単純なコードが付いています。

$(function() { 
 

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

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

 
\t \t \t } else if(event.target === openButton[0] || $(event.target).closest(box).length) { 
 
\t \t \t \t box.show(); \t 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t else { 
 
\t \t \t \t box.hide(); 
 
\t \t \t } 
 
\t \t } 
 
\t \t 
 
\t \t init(); 
 
\t } 
 
\t 
 
\t 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"> 
 
\t <form action="search.php" method="post"> 
 
\t \t <input type="text" placeholder="" id="main_search" class="search_button"> 
 
\t </form> 
 
</div> 
 

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

私の意図は、私はDIVの外側をクリックしたときに、それが閉じ、クリック上の「閉じる」DIVは赤メインのdivを閉じ、ということです。

コード、slidesDownボックスdivとエスケープキーのスライドアップも同様です。

しかし、赤いdivを閉じるために外側をクリックして閉じると機能しません。

誰かがあなただけ.search_buttonにイベントハンドラクリックを使用しているジェフ

Answer 1

、あなたがあなたの体でそれを使用する必要があり、いくつかの説明とコード

おかげで私を支援し、

についてでした。ここ

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