AlpineJS @click.away 不会隐藏/删除元素

【问题标题】：AlpineJS @click.away does not hide/remove the elementAlpineJS @click.away 不会隐藏/删除元素
【发布时间】：2022-03-09 03:44:33
【问题描述】：

我是 Alpine 的新手，我想知道为什么我的 @click.away 不起作用。它应该从页面中隐藏/删除下拉菜单。

【问题讨论】：

标签： javascript alpine.js

【解决方案1】：

不应将事件侦听器注册到 HTML template 标记为 it's not a valid event target。

改为将其添加到 ul 标记中。

<ul 
@click.away="isProfileMenuOpen = false"
x-transition:leave="transition ease-in duration-150" 
x-transition:leave-start="opacity-100" 
x-transition:leave-end="opacity-0" 
class="absolute right-0 w-48 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700" 
aria-label="submenu"
>
<!-- ... -->
</ul>

【讨论】：