在元素外部单击时如何使用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的blur事件

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

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

Answer 2

这样尝试

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

现场演示