onfocusout 防止下拉菜单项在 Blazor 中单击

Question

爱的布雷泽。

我想要一个下拉菜单在我点击离开时关闭。

我已将 onfocusout 添加到周围的 div 以将 showDropdown 切换设置为 false，这会使菜单关闭。

但是，这会禁用菜单项 onclick 事件（例如，运行下面的 UpdateDate 方法），因为似乎首先激活了 onfocusout 事件。

<h3>@date</h3>
<div type="button" class="race-info-item" @onfocusout="e => showDropdown = false">

<button @onclick="e => showDropdown = !showDropdown">Show dropdown</button>

<div class="dropdown-menu select-class-dropdown @(showDropdown ? "show" : "")" >
    <div class="button" @onclick="UpdateDate">Update date</div>
    <div class="button" @onclick="e => showDropdown = false">Cancel</div>
</div>

</div>

private bool showDropdown = false;
private DateTime date = DateTime.Now;

private void UpdateDate()
{
    date = DateTime.Now;
    showDropdown = false;
}

private async Task OutFocus()
{
    await Task.Delay(100);
    showDropdown = false;
}

在上面的 OutFocus() 方法中交换 onfocusout 似乎确实可以解决问题，但引入线程延迟对我来说就像是一种软糖，而且不是很优雅。

我也尝试为菜单 @onclick 事件添加 @onclick:stopPropagation="true"，但这也不起作用 - 看起来 onfocusout 事件仍然首先到达那里。

很难相信这是一个难以解决的问题，而且没有直接的逻辑解决方案。不知道 javascript（因此我使用 Blazor 的原因）所以不想研究 JS 互操作。

提前感谢您的任何建议！

Answer 1

在这个问题上花了一整天然后发布问题后，我想我只是偶然发现了https://stackoverflow.com/a/47944833/15410916的答案

对菜单项使用 onmousedown 而不是 onclick。现在看来可以了。

<h3>@date</h3>

<div type="button" class="race-info-item" @onfocusout="e => showDropdown = false">

<button @onclick="e => showDropdown = !showDropdown">Show dropdown</button>

<div class="dropdown-menu select-class-dropdown @(showDropdown ? "show" : "")" >
    <div class="button" @onmousedown="UpdateDate">Update date</div>
    <div class="button" @onmousedown="e => showDropdown = false">Cancel</div>
</div>

</div>

欢迎就这样做是否有负面影响提出任何意见。