@onblur 阻止 blazor 服务器端应用程序中的 @onclick

Question

考虑以下情况

<div class="dropdown @(ShowDropdown ? " show" : "")">
    <input type="text" class="form-control" @onfocus="(async (e) => { ShowDropdown = true; })" @onblur="(async (e) => { ShowDropdown = false; })" @bind="SelectedWord" />
    @SelectedWord
    <div class="dropdown-menu @(ShowDropdown ? " show" : "")">

        @foreach (var word in words)
        {
            <button class="dropdown-item" @onclick="(async (e) => SelectedWord = word)">@word</button>
        }
    </div>
</div>

@code {
   private bool ShowDropdown = false;
   private string SelectedWord = "";

   private string[] words = { "word 1", "word 2", "word 3", "word 4" };
}

除非我删除 @onblur，否则不会触发 @onclick 事件。

有什么解决办法吗？

Answer 1

将onclick 换成onmousedown。这是浏览器中的事件排序问题，但这应该可以解决。