@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" };
}

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

有什么解决办法吗？

Answer 1

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

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

@onblur prevents @onclick in blazor server side app

blazor

blazor-server-side