当用户点击它的外部时如何用jQuery隐藏一个div

一个元素可以根据鼠标是否在该元素外点击而被隐藏或显示，有两种方法。

方法1：使用最接近的方法：

鼠标向上的事件首先要检查文件

$(document).mouseup(function (e) {
        // rest code here
    }

在目标点击时，会调用closest()方法。这个方法返回DOM树中所选元素的第一个祖先。然后在结果中使用长度属性来找出祖先的数量。如果没有祖先，这意味着点击是在该元素之外。

if ($(e.target).closest(".container").length === 0) {
        // rest code here
}

使用hide()方法隐藏该元素。

$(".container").hide();

示例:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to hide a div when the user 
        clicks outside of it using jQuery?
    </title>
      
    <style>
        .container {
            height: 200px;
            width: 200px;
            background-color: green;
            border: 5px solid black;
        }
    </style>
      
    <script src=
        "https://code.jquery.com/jquery-3.4.0.min.js">
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
      
    <b>
        How to hide a div when the user clicks
        outside of it using jQuery?
    </b>
      
    <p>Click outside the green div to hide it</p>
      
    <div class="container" style="color:green"></div>
      
    <script type="text/javascript">
         $(document).mouseup(function (e) { if ($ (e.target).closest(".container").length
                        === 0) {
                $(".container").hide();
            }
        });
    </script>
</body>
  
</html>

输出:

在div内点击。
在div外点击。

方法2：检查元素是否包含点击目标：

鼠标向上的事件首先要检查文件

$(document).mouseup(function (e) {
    // rest code here
}

该元素被检查了2点，通过传递is()方法和带有点击目标的has()方法，点击没有落在该元素上。

is()方法检查当前元素和指定元素。点击目标作为一个参数被传递，整个结果被否定，基本上是检查点击是否在元素之外。

has()方法用来返回所有与传递给该方法的元素中至少有一个相匹配的元素。然后在结果上使用长度属性来检查是否有任何元素被返回。如果没有返回任何元素，这意味着点击是在元素之外。

if(!container.is(e.target) && container.has(e.target).length === 0) {
    // rest code here
}

使用hide()方法隐藏该元素。

$(".container").hide();

示例:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        How to hide a div when the user clicks
        outside of it using jQuery?
    </title>
      
    <style>
        .container {
            height: 200px;
            width: 200px;
            background-color: green;
            border: 5px solid black;
        }
    </style>
      
    <script src=
        "https://code.jquery.com/jquery-3.4.0.min.js">
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
      
    <b>
        How to hide a div when the user clicks
        outside of it using jQuery?
    </b>
      
    <p>Click outside the green div to hide it</p>
      
    <div class="container" style="color:green"></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>

输出: