@onblur阻止在Blazor服务器端应用程序中@onclick [英] @onblur prevents @onclick in blazor server side app

问题描述

考虑以下情况

<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事件。

有什么解决方案吗？

推荐答案

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

这篇关于@onblur阻止在Blazor服务器端应用程序中@onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！