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

Posted 2023-03-27

【中文标题】Blazor - 防止兄弟事件触发（ onclick > onfocusout ）

【英文标题】：Blazor - Prevent sibling event from firing ( onclick > onfocusout )

【发布时间】：2022-01-01 07:33:43

【问题描述】：

我正在 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 标签，但我没有使用它，因为它在不同浏览器中的外观、感觉和行为方式。

【问题讨论】：

您可以将功能实现添加到问题中吗？如果你去掉Clear()函数并用一些空的void函数替换它，它工作吗？

不，它没有，它只是一个将 bool "showDropdown" 设置为 false 的 void。

用代码更新您的问题或创建一个小提琴，以便我们测试解决方案。

乍一看，问题在于onclick 在onfocusout 事件之后执行，此时下拉菜单关闭。尝试将onclick 替换为onmousedown，但根据您想要执行的操作，您可能不希望关闭下拉菜单...

我已经使用有效的 javascript 更新了我的代码。那里的事件一个接一个地执行。但话虽如此，onmousedown 而不是 onclick 就像一个魅力。谢谢！

【参考方案1】：

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

因此，您的下拉菜单在 OnClick 事件之前关闭，因此未注册点击。

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

基于@DuncanLuk 的this 回答。