为什么 Blazor @onclick 不能在可悬停的 html 元素内容中工作，但 @onmousedown 可以工作？

问题描述

在我的 blazor webassembly 应用程序中，我使用了 bulma dropdown 组件，并且在可切换的下拉内容中有 Log out button。

这是我的 Log out 按钮的 html。

<div id="userMenu" class="dropdown is-right @(UserMenuCollapsed ? "is-active" : null)" @onclick="ToggleUserMenu" @onfocusout="FocusOutHandler">
    <div class="dropdown-trigger p-1">
        <button class="bg-green-300 rounded-full h-10 w-10 flex items-center justify-center border-none cursor-pointer" aria-haspopup="true" aria-controls="user-menu">AR</button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu" role="menu">
        <div class="dropdown-content">
            <NavLink href="/profile" Match="NavLinkMatch.All" class="dropdown-item">
                Profile (@context.User.Identity.Name)
            </NavLink>
            <hr class="dropdown-divider">
            <button class="dropdown-item" @onclick="BeginSignOut">Log out</button>
        </div>
    </div>
</div>

当我点击 #userMenu div 元素时会显示这段 html。现在当我点击 Log out 按钮时什么也没有发生。

在谷歌搜索中，我发现有时将 @onclick 更改为 @onmousedown 会使点击操作起作用。我改变了，它开始工作了。但不知道为什么。请谁能解释一下幕后发生了什么？

更新 1： 阅读@Umair 评论后，我尝试使用 event stop propagation 但这似乎不起作用。

这是更新的代码：

<div id="userMenu" class="dropdown is-right @(UserMenuCollapsed ? "is-active" : null)" @onclick="ToggleUserMenu" @onfocusout="FocusOutHandler">
    <div class="dropdown-trigger p-1">
        <button class="bg-green-300 rounded-full h-10 w-10 flex items-center justify-center border-none cursor-pointer" aria-haspopup="true" aria-controls="user-menu">AR</button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu" role="menu">
        <div class="dropdown-content">
            <NavLink href="/profile" Match="NavLinkMatch.All" class="dropdown-item">
                Profile (@context.User.Identity.Name)
            </NavLink>
            <hr class="dropdown-divider">
            <button class="dropdown-item" @onclick="BeginSignOut" @onclick:stopPropagation="stopPropagation">Log out</button>
        </div>
    </div>
</div>

@code {
    private bool stopPropagation = false;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）