jQuery选择器没有按预期工作（多个：不选择器不工作？）

Question

点击红色区域后，我想关闭我的灯箱： http://naokonishimura.com/witoart/2d/

这个灯箱的HTML是这样的：

<div id="#lightbox" style="display:block;">
<div class="contents_lb">
    <div class="img_box" style="margin-top: 74.5px; width: 398px; height: 563px;">
        <a class="close" href="#" style="left: calc(50% + 159px);"></a>
        <a class="full" href="#" style="left: calc(50% + 159px); top: 523px;"></a>
        <div class="img_wrap" style="width: 398px; left: calc(50% - 199px);">
            <img class="lightbox" alt="Wito RenderA3 TEISHITSUblue 1000p wide" src="http://naokonishimura.com/witoart/wp-content/uploads/2015/03/Wito-RenderA3-TEISHITSUblue-1000p-wide.png" style="opacity: 100; height: 596px;">
            <div class="desc">
                <h2>
                    Wito RenderA3 TEISHITSUblue 1000p wide
                </h2>
                <p></p>
            </div>
        </div>
    </div>
</div>

但我对如何选择这个区域很困惑。我写了这个JQuery代码来关闭灯箱

jQuery("#lightbox.close,#lightbox:not(.contents_lb):not(.img_box):not(.img_wrap):not(.img_wrap img):not(.img_wrap .desc)").click(function(){
                jQuery("#lightbox").remove();
            });

但是当点击#lightbox上的任何地方时，灯箱会关闭。如何在图片上的#lightbox EXCEPT上选择区域？提前谢谢！

Answer 1

$（“＃lightbox：not（.myClass）”）接受所有没有“myClass”类的id灯箱的div，这当然是你的灯箱。

尝试这样的事情：

jQuery("#lightbox").on("click", function(e) {
    if(e.target === this || $(e.target).is(".close")) {
        jQuery("#lightbox").remove();
    }
});

event.target告诉您原始点击的来源。通过检查它不是来自较低级别的div，您可以忽略不是来自红色区域的点击。

Answer 2

您可以执行类似

的操作

jQuery("#lightbox").click(function (e) {
    if (jQuery(e.target).closest('.img_wrap').length) {
        return;
    }
    jQuery("#lightbox").remove();
});

演示：Fiddle

Answer 3

正如Matt Ball在评论中所说，除非取消，否则事件会爆发。试试这个：

jQuery("#lightbox.close,#lightbox:not(.contents_lb):not(.img_box):not(.img_wrap):not(.img_wrap img):not(.img_wrap .desc)").click(function(e){
                e.stopPropagation();
                jQuery("#lightbox").remove();
            });

http://api.jquery.com/event.stoppropagation/