Question

有人可以帮我这个吗？：

我有一个按钮，当点击它时会显示一个div。这个div有几个后代。现在，我想要的是，当我点击文档中的其他位置时，但不会在任何后代中点击此div消失。我认为使用not选择器是这样的：

$("#button").click(function(){
    $("#mydiv").show();
    $(document.body).not($("#mydiv").children()).one('click',function(e) {
        $("#mydiv").hide(); 
    });
        return false;   
});

但这不起作用！知道为什么吗？感谢

Answer 1

如何检查点击事件以查看点击的内容？具体来看event.target。

$(document).click(function(event) {
  var target = $(event.target);

  if (!target.attr('id').match(/^mydiv/) && target.parents('#mydiv').length == 0) {
    $('#mydiv').hide();
  }
});

我之前使用过这段代码来关闭一个打开的窗口，当有人点击窗口以外的任何地方时。

Answer 2

使用最近值来检查目标是否为mydiv的后代。

$("#button").click(function(){
    $("#mydiv").show();
    $(document.body).click(function() {
        if ($(event.target).closest("#mydiv").length == 0)
            $("#mydiv").hide();     
    });
    return false;   
});

您无法使用one()，因为如果您在mydiv内点击，该活动就会被删除。如果要删除它，则必须执行一些自定义事件解除绑定。

Answer 3

问题可能在于您传递给.not()以排除

的内容

.not($("#mydiv").children())

当你传递jQuery对象时，from the docs，传递给.not()的内容应该是字符串选择器，DOM元素或DOM元素数组。因此，只需将jQuery对象转换为元素数组就可以了

$("#button").click(function(){
    var myDiv = $("#mydiv").show();
    $(document.body).not(myDiv.children().get()).one('click',function(e) {
        myDiv.hide();     
    });
        return false;   
});

jquery文档正文一击事件

3 个答案: