Vue-利用event.path实现点击目标DOM外任何地方触发事件

如图 点击红框DOM外的任何地方，实现popover部分隐藏

此处popover为自己手写，element-ui中的el-popover在#app外，与最外层DOM同级，样式不好控制；若el-popover封装在组件中，各地方引入，相对定位更是难以把控，故手写。也比较容易； 交互上el-popover只能纯的click或者hover等，我们ui要求hover出现，点击其他位置关闭。。。

利用e.path来获取 触发事件的元素冒泡过程的所有元素；若数组中有红框最外一层的元素，则表示是在红框内点击的，若没有，则可触发你需要的东西

监听点击事件，记得销毁

mounted() {
    document.addEventListener('click', this.hidePopClick)
},
destroyed() {
    document.removeEventListener('click', this.hidePopClick)
},

绑定的点击事件本人 (注：path为元素冒泡过程的所有元素的数组;cost-filter为红框外层的类名）

hidePopClick(e) {
    const path = e.path || (e.composedPath && e.composedPath())
    let flag = false
    path.forEach(dom => {
        if (dom.className === 'cost-filter') {
            flag = true
            return
        }
    })
    if (!flag) {
        this.popShow = false
    }
},

另外，event事件在FireFox和Safari下path属性不存在，查找资料发现，在浏览器新的标准里定义了composedPath，故记得兼容

const path = e.path || (e.composedPath && e.composedPath())