Javascript 在“实体”上单击关闭下拉组件

我使用的是Vue.js，但我认为我使用的lib并不重要，只是一个允许您拥有web组件的lib。无论如何-我有一个下拉组件（见下面的代码），我需要知道，如何关闭身体点击下拉菜单？如果它是一个有自己的作用域数据的组件，我假设您不能只在主体中添加一个事件侦听器，它超出了作用域，对吗？我该怎么办

dropdown.template.html

<li class="dropdown">
    <a href="#" tabindex="1" v-on="click: toggleDropdown($event), keydown: closeDropdown($event) | key 'esc'"><content select=".dropdown__button"></content></a>
</li>

<ul class="dropdown__menu" v-show="displayed">
    <content select=".menu"></content>
</ul>

---

您应该添加

blur

事件：

<a href="#" tabindex="1" v-on="click: toggleDropdown($event), keydown: closeDropdown($event) | key 'esc', blur: closeDropdown($event)"><content select=".dropdown__button"></content></a>

---

啊，当然，这么简单。这确实妨碍了通过下拉列表进行可访问的选项卡切换，对吗？我该提个新问题还是你能给我指出正确的方法那就太好了。谢谢

<a href="#" tabindex="1" v-on="click: toggleDropdown($event), keydown: closeDropdown($event) | key 'esc', blur: closeDropdown($event)"><content select=".dropdown__button"></content></a>