如何在div外部单击鼠标时隐藏div

在div外部单击鼠标时隐藏div，可以通过以下几种方式实现：

使用JavaScript事件监听器：在div外部单击鼠标时触发事件，通过修改div的CSS样式来隐藏div。具体实现代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  display: block;
}
</style>
</head>
<body>

<div id="myDiv"></div>

<script>
document.addEventListener('click', function(event) {
  var myDiv = document.getElementById('myDiv');
  if (!myDiv.contains(event.target)) {
    myDiv.style.display = 'none';
  }
});
</script>

</body>
</html>

使用jQuery库：jQuery提供了方便的事件处理方法，可以简化代码实现。具体实现代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#myDiv {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  display: block;
}
</style>
</head>
<body>

<div id="myDiv"></div>

<script>
$(document).click(function(event) {
  var myDiv = $('#myDiv');
  if (!myDiv.is(event.target) && myDiv.has(event.target).length === 0) {
    myDiv.hide();
  }
});
</script>

</body>
</html>

以上两种方式都是通过判断点击事件的目标元素是否在div内部来决定是否隐藏div。