重疊式內容周圍的可點擊區域

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

創建的示例，單擊內容可防止隱藏操作示例