如何解决因使用@click.stop引发的阻止事件冒泡导致的bug问题？

本文共计1089个文字，预计阅读时间需要5分钟。

问题+在项目页面中使用element-popover，设置trigger='click'时点击外部不会触发自动隐藏，但在element官方中是可以正常触发的（官方示例），项目中的菜单是自定义编写的，所以怀疑是自定义编写的问题。

问题

在项目页面中使用 element popover，设置trigger='click'时点击外部不会触发自动隐藏，但在 element 官网中是可以正常触发的（官方示例），项目中的菜单是自定义写的，所以怀疑是有黑魔法。

查找原因

1. 将 popover 写在app.vue根组件内，发现可以正常触发自动隐藏。
2. 在app.vue的 mounted 钩子中加入window.addEventListener('click', () => console.log('window click===>>>>'))，发现只有菜单栏外层能够触发。
3. 检查菜单栏组件，发现代码中<div class="main" @click.stop="isShowWhole = false">，这里的 click 事件使用了 stop 修饰符（阻止冒泡），可能阻止了 popover 外部点击的事件判断，尝试将 stop 修饰符去掉，发现外部点击事件正常触发。