Javascript 框在创建时隐藏

在我的网站上，我有一个按钮，点击后会创建一个框。如果该框可见，并且用户在其外部单击，则应将其隐藏。我遇到的问题是，这个框在创建之后就被隐藏了

这是一段代码，如果用户在框外单击，我会使用它来移除框。我很难理解为什么在创建长方体时会触发它，因为它还不是真正可见的

函数createBox（）{
var输出=”；
输出+=''；
输出+=''；
$（“#列表框”）.html（输出）；
document.getElementById（'list-box'）.style.display='block'；
}
$（文档）。单击（函数（事件）{
if（！$（event.target）.closest（'.single box'）.length）{
如果（$（'.single box'）。是（“：可见”））{
var输出=”；
$（“#列表框”）.html（输出）；
document.getElementById（'list-box'）.style.display='none'；
}
}        
});
#列表框{
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.8）；
z指数：500；
位置：固定；
显示：无；
}
.单盒{
z指数：1000；
顶部：100px；
位置：固定；
背景色：白色；
溢出y：自动；
溢出x：隐藏；
宽度：500px；
高度：500px；
右：计算（50%-250px）；
盒影：0px 1px 4px-1px rgba（0,0,0,1）；
文本对齐：居中；
边界半径：3px；
}


创建框

在这里尝试使用此步骤，首先检查
元素
单击的
id

如果元素是您希望它创建该框的按钮，则触发您的
创建框（）
，否则如果单击元素，则该框为空
#列表框
，并将其隐藏：


函数createBox（）{
var输出=”；
输出+=''；
输出+=''；
$（“#列表框”）.html（输出）；
$（“#列表框”）.show（）；
}
$（文档）。单击（函数（e）{
var目标=$（e.target）；
var id=target.attr（'id'）；
var eclass=target.attr（'class'）；
如果（id==“创建框”）{
createBox（）；
道具（“禁用”，真）；
}
else if（电子课堂==“单盒”）
{
回来
}
否则{
$（“#列表框”）.html（“”）；
$（“#列表框”）.hide（）；
$（'#creatbox'）.prop（“禁用”，false）；
}
});
#列表框{
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.8）；
z指数：500；
位置：固定；
显示：无；
}
.单盒{
z指数：1000；
顶部：100px；
位置：固定；
背景色：白色；
溢出y：自动；
溢出x：隐藏；
宽度：500px；
高度：500px；
右：计算（50%-250px）；
盒影：0px 1px 4px-1px rgba（0,0,0,1）；
文本对齐：居中；
边界半径：3px；
}

创建框

$（“#somebutton”）。单击（函数（）{
$（“#容器”）.append（'您的隐藏框现在可见'）；
});
var mouse_is_inside=false；
$（文档）.ready（函数（）{
$（'#容器'）。悬停（函数（）{
鼠标_在_内=真；
}，函数（）{
鼠标_在_内=false；
});
$（“body”）.mouseup（函数（）{
如果（！mouse_在里面）$（'.box'）.hide（）；
});
});
#容器{
宽度：200px；
高度：200px；
背景：红色；
}

你的钮扣
工作解决方案：


let mouse_inside=false；
$（“#somebutton”）。单击（函数（）{
设div=document.createElement（'div'）；
div.className='box'；
$（“#容器”）。追加（div）；
$（'.box'）.hover（函数（）{
鼠标_inside=true；
}，函数（）{
鼠标内=假；
});
});
$（文档）.ready（函数（）{
$（“body”）.mouseup（函数（）{
鼠标在| |$（'.box'）.hide（）内移动；
});
});
#容器{
宽度：200px；
高度：200px；
背景：红色；
}
#container.box{背景颜色：蓝色；宽度：40px；高度：40px；}

在下面添加一个框
这是因为在段落元素上发生的单击事件会冒泡到文档中，并且您附加了一个处理程序，如果不满足某个条件，该处理程序将隐藏该元素。该条件是最初单击的元素本身是一个/single box
元素还是它的后代。。。显然不是。如果您想要一种简单的方法来解决这个问题，那么请停止在HTML中使用onclick属性，但也要以正确的jQuery方式附加段落的处理程序，然后取消该事件的冒泡。您应该在保存答案之前尝试代码段。我想你忘了选择jQuery库，你得到了一个
ReferenceError:$未定义
错误。你没有注意到他在点击框时想要关闭框，而不是父框，你应该在点击红色框时关闭蓝色框：），et merciFixed，@M0ns1f（只是一个输入错误）；）。soyer le bienvenue:）那就去朋友！^^'