退出Div只能點擊背景與JavaScript（jquery）[彈出]

Question

我在一個困境位。我目前有一個彈出窗口，並且我希望彈出窗口在單擊背景或單擊「ex out」按鈕時關閉。問題是，當主框被點擊時它會關閉彈出框。這是我的HTML：

<div id="newcommentcontainer"> 
    <div id="newcommentholder" class="col-xs-12 col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3"> 
     <form method="post" class="col-xs-12"> 
      <div id="exoutnewcommentholder" class="col-xs-12"> 
       <span class="glyphicon glyphicon-remove" id="exoutnewcomment"></span> 
      </div> 
      <div id="newcommenttitle" class="col-xs-12"> Add New Comment </div> 
      <textarea id="commentinput" name="commentinput" class="col-xs-12 col-sm-8 col-sm-offset-2" placeholder="Type your Comment here."></textarea> 
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3"> 
       <button id="createcommentbutton" class="col-xs-12" input type="submit" value="addcomment">Add Comment</button> 
      </div> 
      <div id="commentcharactercount" class="col-xs-12"> 0/500 Characters. </div> 
      <input type="text" id="commentlengthholder" name="commentlengthholder" style="display:none"> 
     </form> 
    </div> 
</div> 

因此，基本上，當#newcommentcontainer（第一個div），被點擊，整個事情關閉。如果單擊#newcommentholder，則不會發生任何事情，因爲這是持有該信息的內容。然而，如果點擊#exoutnewcommentholder，整個事情也會關閉。

簡單地說，當點擊它時，如果點擊#newcommentholder（不包括ex out按鈕），我希望整個事件被點擊爲display: none。

我已經開始用這個jQuery：

$("#newcommentcontainer").click(function(e) { 
     $("#newcommentcontainer").css("display","none"); 
    }); 

但我不知道如何從這裏繼續。請幫忙！ :)

Answer 1

可以使用2個點擊處理程序，第二個會阻止點擊事件的傳播從newcommentholder讓裏面的點擊次數不會關閉彈出

$("#newcommentcontainer, #exoutnewcommentholder").click(function (e) { 
    $("#newcommentcontainer").hide(); 
}); 
$('#newcommentholder').click(function (e) { 
    //stop propagation to newcommentcontainer element 
    e.stopPropagation(); 
}) 

---

另一種選擇，你可以試試是（未測試）檢查目標元素是否在newcommentholder之內like

$("#newcommentcontainer").click(function (e) { 
    var $target = $(e.target); 
    if ($target.closest('#exoutnewcommentholder').length || !$target.closest('#newcommentholder').length) { 
     $("#newcommentcontainer").hide(); 
    } 
});