javascript - 如果点击 child ，不要隐藏灯箱

Question

我有一个灯箱，里面有一个居中的 child 内容。 child 也有一个关闭按钮。我只想在单击灯箱或关闭按钮时隐藏灯箱。此刻它也会关闭，如果 child 被点击。

js fiddle

HTML

<div class="lightbox">
    <div class="child">
        <a class="close" href="#"><span>x</span></a>
        <header>
            <h4>content</h4>
        </header>
    </div>
</div>

JS

$('.lightbox, .close').on('click', function(){
    $('.lightbox').fadeOut();
});

Answer 1

尝试使用 e.target 来玩，

$('.close,.lightbox').on('click', function (e) {
    if ($(e.target).parents(".lightbox").length && !$(e.target).is(".close,.close > span"))
    return;
    $('.lightbox').fadeOut();
});

DEMO