Question

当用户点击div外部以隐藏该div时，是否可以调用任何事件？

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

想法？

Answer 1

您可以尝试将onclick事件处理程序委托给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();
});

Answer 2

单击任何元素时，请检查元素的ID是否与要隐藏的元素的ID匹配。如果没有，请隐藏它。

$("*").click(function(){
    if(this.id === "hideMe"){
        return false;
    }
    else{
        $("#hideMe").hide();
    }
});

查看jsFiddle

上的演示

Answer 3

是。显示div后，仅绑定click事件以隐藏div（到文档正文）。然后，在显示的div本身上，捕获click（）事件，并阻止div click（）上的传播。 div外的任何点击都会隐藏，任何内部点击都不会冒泡到文档中。

function hideDiv(){
    $('#someDiv').hide();
    $(document.body).unbind('click',hideDiv);
}

$('#someLink').click(function(){
    $('#someDiv').show().click(function(e){ e.stopPropagation(); });
    $(document.body).bind('click',hideDiv);
});

Answer 4

一个解决方案是检查点击哪个元素。

另一种解决方案可能是：

<body>
  <div class="infopane"></div>
  <div class="wrapper">
    content of page
  </div>
</body>

所以我能做到：

$('.wrapper').click(function() {
  $('.infopane').hide();
});

Answer 5

您正在寻找外部事件插件。超级好用

http://benalman.com/projects/jquery-outside-events-plugin/

用户在div外部点击时的JQuery事件？

5 个答案: