vue 最外面一层的div的点击事件执行同时如何让其他的点击事件不执行

Question

画红框的都是一个点击事件这个蓝色区域的点击事件是让右上角的弹窗关闭最外层的点击事件添加了阻止冒泡行为 touchstart.stop=“closeMenu” 还是没生效 点击蓝色区域关闭右上角弹窗跟下层的点击事件同时执行了 这应该怎么阻止？

Answer 1

@click.capture.stop

Answer 2

思想：
在最外层div上绑定事件 注意菜单不能包含在此div中
菜单状态 open = true;时点击非菜单部分关闭菜单 open = false;此时阻止捕获；
菜单状态 open = false; 此时不做任何操作

大概这样做：

<div @click.capture = myClick($event)></div>//.capture 设置事件为捕获模式js:
myClick:(event){    if(this.open){
        event.preventDefault();//再stop止单击事件继续传播 ，然后子元素就不会被触发
        this.open = false;//关闭菜单
    }
}