javascript - 在元素外部单击时如何使用jquery隐藏元素

Question

到目前为止，我可以抓取图像的 src 并将其显示在固定的分区中，有点像弹出窗口。但是当鼠标在 div 之外单击时，我想隐藏 div 元素。请指导我如何做，如果我的代码可以改进，请纠正我。谢谢！

js：

$(document).ready(function () {
    $(".pic").hide();
    $(".screen").click(function () {
        display($(this));
    });
});

function display($this) {
    var source = $("img", $this).attr("src");
    $(".pic img").attr("src",source);
    $(".pic img").css("width","450px");
    $(".pic").show();
}

html:

            <div id="album">
                <div class="pic">
                    <img src="" />
                </div>

                <div class="screen">
                    <h1 class="title">Photo 1</h1>
                    <img src="images/1 png.png" class="image" />
                    <p class="description">This is a description</p>
                </div>

                <div class="screen">
                    <h1 class="title">Photo 1</h1>
                    <img src="images/2 png.png" class="image" />
                    <p class="description">This is a description</p>
                </div>
                <span class="clear_left"></span>

            </div>

Answer 1

可以使用jquery的模糊事件

$(".screen").bind('blur',function () {
    hide($(this));
});

function display($this) {
    $(".pic").hide();
}

Answer 2

像这样试试

$(document).click(function () {
    if ($(this).class != "pic") {
        $(".pic").hide();
    }
});

现场演示