点击其他区域，关闭该弹窗

工作时遇到一个问题。点击头像显示头像弹窗，点击其他区域，就关闭该弹窗。
由于头像弹窗是一个单独的组件，怎么监听头像弹窗外的区域的点击事件呢？

代码如下：

document.addEventListener("click", (e) => {
    if (!this.$el.contains(e.target)) {
        this.isPersonalShow = false; //点击其他区域关闭
    }
});

其中$el代表当前组件的dom
.contains() 判断一个元素内是否包含另一个元素
用法如下：

<div id="parent">
  parent
  <div id="children">children</div>
</div>

let parent = document.getElementById('parent')
let children = document.getElementById('children')
if (parent.contains(children)) {
  console.log(true)
}