Jquery 使用mouseup函数显示长度为0的目标

我试图在点击一个按钮时创建一个覆盖，然后在用户点击覆盖外时将其删除。在我的示例中，当单击覆盖时，目标返回的长度为“0”，我不明白为什么此方法与我使用过的其他示例一起使用。有什么想法吗

这是js

$(document).ready(function() {
    $(document).on("click",".pop", function() {
       if ($('#search-overlay').length === 0) {
           $('body').append('<div id="search-overlay"></div>');
        }
    });
    $(document).on("mouseup", function(e) {
      var container = $("#search-overlay");
      if (container.has(e.target).length === 0) {
        alert(container.has(e.target).length);
        container.remove();
      }
    });
});

$（文档）.ready（函数（）{
$（document）.on（“click”，“.pop”，function（））{
如果（$（“#搜索覆盖”）。长度==0{
$（'body'）。追加（''）；
}
});
$（文档）.on（“mouseup”，函数（e）{
var容器=$（“#搜索覆盖”）；
if（container.has（e.target）.length==0）{
警报（container.has（e.target）.length）；
容器。移除（）；
}
});
});

而您看到它在操作中的链接

，这是因为它查找子体，与jQuery对象内部的元素不匹配。一个额外的检查来修复您的逻辑：

if (!container.has(e.target).length && !container.is(e.target)) {

当涉及性能时，您可以将函数替换为

e.target

元素与

容器中包含的第一个元素之间的简单比较：

 if (!container.has(e.target).length && container[0] !== e.target) {



您还可以通过以下方式进一步简化：


同样的逻辑，但相反
closest
开始尝试匹配jQuery对象中包含的元素，并遍历DOM树，查找匹配的祖先覆盖。结果与第一个版本相同


第三种变体，放弃了逻辑测试的需要。附加一个mouseup处理程序，该处理程序将停止事件传播到覆盖，因此它不会到达
文档
：

$('body').append($('<div>', {
    id: 'search-overlay',
    mouseup: function(e) {
        e.stopPropagation();
   }
}));

$（'body'）。追加（$（''）{
id:'搜索覆盖'，
鼠标：函数（e）{
e、 停止传播（）；
}
}));

这是因为查找子体时，它与jQuery对象内部的元素不匹配。一个额外的检查来修复您的逻辑：

if (!container.has(e.target).length && !container.is(e.target)) {


当涉及性能时，您可以将函数替换为
e.target
元素与
容器中包含的第一个元素之间的简单比较：

 if (!container.has(e.target).length && container[0] !== e.target) {



您还可以通过以下方式进一步简化：


同样的逻辑，但相反
closest
开始尝试匹配jQuery对象中包含的元素，并遍历DOM树，查找匹配的祖先覆盖。结果与第一个版本相同


第三种变体，放弃了逻辑测试的需要。附加一个mouseup处理程序，该处理程序将停止事件传播到覆盖，因此它不会到达
文档
：

$('body').append($('<div>', {
    id: 'search-overlay',
    mouseup: function(e) {
        e.stopPropagation();
   }
}));

$（'body'）。追加（$（''）{
id:'搜索覆盖'，
鼠标：函数（e）{
e、 停止传播（）；
}
}));

谢谢您的详细解释！干杯谢谢你的透彻解释！干杯