如果单击了孩子，不要隐藏Lightbox

Question

我有一个Lightbox，里面有一个带内容的居中的孩子。孩子也有一个关闭按钮。我只想隐藏灯箱，当灯箱被点击或关闭按钮。此时，如果孩子被点击，它也会被关闭。

js小提琴

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();
});

演示