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

Question

爱Blazor。

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

我在周围的div中添加了onfocushout，将showDropdown切换设置为false，这样就关闭了菜单。

然而，这会禁用菜单项onclick事件(例如，运行下面的UpdateDate方法(，因为看起来，onfocuout事件是首先激活的。

<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((方法替换为onfocuout似乎确实解决了这个问题，但引入线程延迟对我来说就像是一个骗局，而且不是很优雅。

我还尝试添加了@onclick:stopPropagation="真"；对于菜单@onclick-events，但这也不起作用——看起来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>

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