我想通过在菜单元素外部单击来隐藏菜单

document.addEventListener('click', function(event) {
  var menu = document.getElementById('menu'); // 菜单元素
  var target = event.target; // 点击的目标元素

  // 判断点击的目标元素是否在菜单元素内部
  if (!menu.contains(target)) {
    menu.style.display = 'none'; // 隐藏菜单
  }
});

<div id="menu" style="position: relative;">
  <!-- 菜单内容 -->
</div>

<div id="mask" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none;"></div>

var menu = document.getElementById('menu'); // 菜单元素
var mask = document.getElementById('mask'); // 遮罩层

mask.addEventListener('click', function() {
  menu.style.display = 'none'; // 隐藏菜单
  mask.style.display = 'none'; // 隐藏遮罩层
});

document.addEventListener('click', function(event) {
  var target = event.target; // 点击的目标元素

  // 判断点击的目标元素是否在菜单元素内部
  if (!menu.contains(target)) {
    menu.style.display = 'none'; // 隐藏菜单
    mask.style.display = 'none'; // 隐藏遮罩层
  }
});