由popover框一起的操作demo问题

场景： 当popover框弹出的时候，又有MessageBox 提示，此时关闭MessageBox 提示，popover就关闭了。将popover改为手动激活，可以解决这个问题，但是会引起另外一个问题，之前（click触发的时候），点击空白位置，可以关闭掉popover，但是现在却不可以了

解决

<el-popover
    placement="bottom"
    title="标题"
    width="200"
    trigger="manual"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
    v-model="visible">
    <el-button slot="reference" @click="visible = !visible">手动激活</el-button>
  </el-popover>

可以看到手动激活的时候，是通过visible来决定其显示或者隐藏，那是不是可以监听全局的点击事件来做处理：当MessageBox 隐藏的时候，且popover显示的时候，不点击（除了触发元素之外）的时候，做关闭处理

关键点在于如何知道点击的是哪个元素？
*点击A的时候不管，出了A之外要做处理，很明显这是个包含的关系 *
了解一下contains：探究元素之间是不是包含的关系

  mounted() {
    document.addEventListener('click', this.handlePopoverShow);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handlePopoverShow);
  },
 handlePopoverShow(event) {
      const elements = $('.el-message-box__wrapper');
      const specificElement = $('.add-btn');
      const specificElementEdit = $('.edit-btn');
      console.log('specificElementEdit', specificElementEdit);
      let isShow = this.tableData.some((item) => item?._popoverVisible);
      if (
        (this.formPopoverVisible || isShow) &&
        elements.length &&
        elements[0].style.display === 'none'
      ) {
        if (!specificElement[0].contains(event.target)) {
          this.formPopoverVisible && (this.formPopoverVisible = false);
        }
        if (
          !specificElementEdit[this.indexEdit].contains(event.target) &&
          isShow
        ) {
          this.tableData.forEach((item) => {
            item._popoverVisible = false;
          });
        }
      }
    }