Blazor -阻止同级事件触发( onclick > onfocusout )

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。

因此，您的dropdown在OnClick事件之前关闭，因此不会注册单击。

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

基于@DuncanLuk的this回答。