javascript - 当用户在 div 外部单击时的 JQuery 事件？

Question

是否有任何事件可以在用户单击 div 外部以隐藏该 div 时调用？

我尝试使用 $(document).click()，但是即使当用户单击应该显示 div 的链接时也会调用该方法。因此，点击处理程序事件显示 div，并立即 $(document).click() 隐藏它，这意味着永远不会显示 div。

想法？

Answer 1

您可以尝试将 onclick 事件处理程序委托(delegate)给 body 元素(或其他合适的父容器)并测试是否 target element是揭示链接:

$("body").click(function(e) {
    if(e.target.id == "idOfLinkToShowDiv") {
        $("#idOfTheDiv").show();
    } else {
        $("#idOfTheDiv").hide();
    }
});

可以使用 .toggle 缩短以上内容:

$("body").click(function(e) {
    $("#idOfTheDiv").toggle(e.target.id == "idOfLinkToShowDiv");
});

另一种方式:

$("body").click(function() {
    $("#idOfTheDiv").hide();
});

$(".showLink").click(function(e) {
    e.stopPropagation();
    $("#idOfTheDiv").show();
});