点击盒子外任意位置关闭当前盒子

场景：

　　在不使用各种UI组件的情况下，自己敲写一个盒子或者弹窗

功能：

　　实现点击盒子外任意位置关闭当前盒子，点击盒子内任意位置不关闭当前盒子

 

这里介绍一个简单实用的JS方法 contains()

　　contains()，js原生方法，用于判断DOM元素的包含关系；

　　需要注意的是：它以HTMLElement为参数，且返回布尔值。

vue示例：

<template>
    <div @click="close($event)">
        <button @click="show_=true">显示</button>
        <div v-if="show_" id="popup">
            我是弹窗
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                show_: false
            }
        },
        methods: {
            // 隐藏盒子的事件应该绑定在最外层盒子（比如vue的app.vue的最外层div标签上），或者绑定在document
            close(event) { // 传入event对象
                var document = document.getElementById("popup"); // 弹窗id
                if (document && !document.contains(event.target)) { // 判断弹窗是否包含点击节点，不包含则在弹窗外，隐藏弹窗
                    this.show_ = false
                }
            }
        }
    }
</script>

　　组件开发时，隐藏盒子通常需要进行传参或者使用仓库控制隐藏参数，需要将上面示例进行扩展变形……