覆蓋內容周圍的可點擊區域

Question

這可能是一個簡單的解決方案，但我無法繞開它。我想要做的是製作一個疊加層，並且可以點擊子圖層，而不需要爲孩子分配任何交互。像這樣 -

<div class="overlay"> 
    <div class="content">Lorem ipsum dolor.</div> 
</div> 

jQuery的樣本函數：

$('.overlay').click(function() { 
    $(this).hide(); 
}); 

這裏會發生什麼，如果我點擊一個子層的功能，甚至可以運行。我應該如何設置，以便只有兒童周圍的區域受到影響？

Answer 1

您可以通過e.target

$('.overlay').click(function(e) { 
    if (!$(e.target).is('.content')) { 
     $(this).hide(); 
    } 
}); 

Answer 2

嘗試e.stopPropagation(); -

$('.content').click(function(e) { 
    e.stopPropagation(); 
    alert('child'); 
}); 

JSFiddle

Answer 3

創建例如檢查點擊目標，點擊內容防止隱藏行動 example