Blazor

Question

我正在 Blazor 中创建自己的自动完成输入。（如下所示）

function FocusOut()
{
  document.getElementById("list-item-one").innerHTML = "Focus out";
}

function Click()
{
  document.getElementById("list-item-one").innerHTML = "Click";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" onfocusout="FocusOut()" />
<ul class="dropdown">
  <li id="list-item-one" onclick="Click()">List Item One</li>
</ul>

当我单击列表项时，将触发 onfocusout 事件而不是 onclick 事件。有没有办法“推送”onclick 事件？

这不是父子关系，因此“stopPropagation”无效。我也知道有一个 datalist 标签，但我没有使用它，因为它在不同浏览器中的外观、感觉和行为方式。

Answer 1

问题是事件的顺序是OnMouseDown、OnFocusOut、OnClick。

因此，您的下拉菜单会在 OnClick 事件之前关闭，所以点击没有被注册。

一个可行的解决方案是将 OnClick 替换为 OnMouseDown。

基于@DuncanLuk 的this 回答。

Blazor - 防止触发兄弟事件（onclick > onfocusout）

Blazor - Prevent sibling event from firing ( onclick > onfocusout )

html

javascript

jquery

blazor-webassembly