jQuery Click Outside Div简介
jQuery点击Div外被点击的元素不是容器本身或Div元素的后裔。我们可以绑定到文档的点击事件，用jQuery隐藏div容器。对于一个下拉菜单来说，一个必须具备的功能就是能够在点击外面隐藏元素。在用户点击外部的时候，我们需要隐藏一个div的情况下，这也是很有用的。
jQuery点击外面的div概述
jQuery使得在用户点击外部的时候隐藏一个div或元素变得简单。我们可以利用事件目标属性来检测一个元素外的点击，比如一个下拉菜单。该属性会返回引起该事件的DOM元素。
在这种情况下，应避免使用停止传播方法，因为它中断了正常的DOM树事件流。
如何使用jQuery在div外点击？
一个下拉菜单必须具备的功能是能够在点击外面隐藏元素。在用户点击外部的时候，我们需要隐藏一个div的情况下，这也是很有用的。
停止传播功能可以禁用事件传播到父组件。因此，当我们点击一个子元素时，父元素不应该被点击。
将点击事件处理程序附加到一个元素外的区域，如文档，以检测元素外的点击。使用事件处理程序中的jQuery nearest方法，我们可以确定元素或元素的后代的目标。
我们可以使用jQuery来监听html元素上的点击事件，当我们在元素外点击时触发一个事件。然后我们可以在事件处理程序中检查哪个元素被点击了。
然后用点击事件监听器来调用点击它。$('html')被用来选择一个html元素。目标属性返回被点击的元素。
因此，当我们点击我们创建的div之外时，控制台会记录'clicked outside'。为了检查用户对文档的点击情况，我们可以使用jQuery的mouseup方法。
mouseup的jQuery事件是与这个方法绑定的。一个特定的元素会触发该事件。
这个方法结合了on ('mouseup,' handler) 和 trigger ('mouseup') 方法。当鼠标指针在一个元素上，鼠标按钮被释放，mouseup事件被派发到该元素。
下面的例子显示了jQuery在div外的点击使用mouseup方法来检查用户对文档的点击。
<!DOCTYPE html>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.3.1/jQuery.min.js"></script>
<script>
$(document).mouseup(function(e)
var container = $("#target");
if (!container.is(e.target) && container.has(e.target).length === 0)
container.hide ();
</script>
</head>
<p id = "pid"> jQuery click outside div </p>
<button id = "btn1"> jQuery Click </button>
</body>
</html>
通配符选择会选择页面上的每一个元素；我们可以在选择完所有的元素后为我们的特定元素恢复设置。
否则，我们可以把我们的元素放到一个div中，更新这个div的点击事件处理程序，然后对这个div中的特定元素应用同样的逻辑。
当使用jQuery时，我们必须使用stop Propagation方法来确定当点击发生在一个元素之外。
停止传播方法可以防止事件被传播到父项。如果我们点击一个子元素，父元素不应该被点击。
container.has (e.target).length == 0
是确定点击目标是否是容器元素的一个子元素。然而，如果我们验证长度为零，当我们想看它是否为真时，这将评估太假，例如当我们想隐藏容器时，点击它的一个父元素。
jQuery点击div外的删除元素
有两种方法可以隐藏或暴露一个元素，这取决于鼠标是否在它外面被点击。
当鼠标向上的事件被触发时，应该首先检查文档。在目标点击时，最近的方法被调用。在DOM树中，这个函数返回元素的第一个祖先。
长度属性被应用于结果以计算祖先的数量。如果没有任何祖先，那么点击就发生在该元素之外。然后，使用hide方法，该元素被掩盖了。
下面的例子显示了jQuery在div外点击删除的元素，如下所示。
`<!DOCTYPE html> <html> <head> <title>`
在div外点击删除元素
<!DOCTYPE html>
<title>
Click outside div delete Element
</title>
<style>
.container {
height:200px;
width: 200px;
background-color: Red;
border: 4px solid black;
</style>
<script src =
"https://code.jQuery.com/jQuery-3.4.0.min.js">
</script>
</head>
<h1 style = "color: Red">
JQuery click outside div delete Element
This example shows a click outside the div delete element.
<p> Click outside to the dive delete element. </p>
<div class = "container" style = "color:Red"> </div>
<script type="text">
$(document).mouseup(function (e) {
if ($(e.target).closest(".container").length
=== 0) {
$(".container").hide();
</script>
</body>
</html>
JQuery在div外点击删除元素
`</h1> <b>`
这个例子显示了在div delete元素外的点击:
<!DOCTYPE html>
<title>
Click outside div delete Element
</title>
<style>
.container {
height: 200px;
width: 200px;
background-color: red;
border: 5px solid black;
</style>
<script src=
"https://code.jQuery.com/jQuery-3.4.0.min.js">
</script>
</head>
<h1 style="color: red">
jQuery click outside div delete Element
This example shows a click outside the div delete element.
<p>Click outside to the dive delete element.</p>
<div class="container" style="color:red"></div>
<script type="text/javascript">
$(document).mouseup(function (e) {
var container = $(".container");
if(!container.is(e.target) &&
container.has(e.target).length === 0) {
container.hide(); }
</script>
</body>
</html>
下面的例子显示了检查内容是否包含点击目标。绕过有点击目标的is和has方法，元素被测试两件事：点击没有落在元素上。
该方法是否将当前元素与指定元素进行比较？点击目标被作为参数提供，整个结果被否定，以查看点击是否发生在元素之外。
当用户点击一个div或元素时，jQuery可以简单地将其隐藏起来。当用户导航离开这个元素时，这个div将被隐藏。要检测点击事件并在点击某个特定元素之外时隐藏DIV，请使用jQuery mouseup事件的目标属性。
这是一个关于jQuery Click Outside Div的指南。这里我们讨论了如何使用jQuery Click outside div以及概述和代码。你也可以看看下面的文章来了解更多------。
