在Blazor上的div或元素外部单击以将其关闭的事件

Question

在我的Blazor server-side项目中，我需要通过在菜单外部单击来关闭弹出菜单。我使用一个简单的If语句通过触发onClick事件来显示/隐藏弹出窗口。但不存在通过在弹出菜单外部单击来关闭弹出窗口的事件。因此，用户应该只通过单击带有onClick事件的元素来关闭它。所以我的问题是，我们如何才能在不使用JS的情况下更好地解决这个问题

提前谢谢你。

Answer 1

添加一个屏幕大小的<div>元素，该元素的z索引比弹出菜单低1，但高于应用程序的其余部分。您需要在CSS类中使用position: fixed，然后使用width: 100%; height: 100%; top: 0%; left: 0%;，这样它就会填满整个页面。初始CSS显示值应为display: none;。打开弹出窗口时，还要将div的display属性更改为display: flex以将其添加到DOM中，然后在此浮动div上添加一个@OnClick单击处理程序，该处理程序将关闭弹出窗口并将浮动div显示属性设置回display: none;。div应该是清晰的，这样你仍然可以看到它后面的应用程序的其余部分，但允许你在弹出式窗口之外单击你正在寻找的行为，因为弹出式窗口之外的任何地方都会出现在覆盖屏幕其余部分的Div上。

请注意，在弹出窗口中，当您从弹出窗口中关闭弹出窗口时，您还需要将浮动Div显示值设置回'none‘，否则它将停留在原处，并需要额外单击才能使其消失。

您还可以使用透明度对Div元素稍加阴影，以便在打开弹出窗口时为其提供突出显示效果。

Answer 2

下面是我使用div来触发onfocusout事件的方法，其中if语句使用ShowSelectBox变量来显示或隐藏某些内容：

<div tabindex="0" @onfocusout="@(() => ShowSelectBox = false)">
...
</div>

我在一个blazor webassambly应用程序中使用了这个，但对于服务器端应该是一样的。

Answer 3

我想出了一个不使用JS的解决方案，使用onmouseover事件，我们可以将bool var的值设置为true，使用onmouseout事件，我们可以将其设置为false，从而验证鼠标单击的是标签元素还是标签元素

 <button @onclick="Show">Click</button>
<div  @onmouseover="MouseIn" @onmouseout="MouseOut">...</div>
    
@code{
bool IsInside; 
void Show()
{
   if(!IsInside)
   {
       ...
   }
}
void MouseIn()
{
   IsInside= true
}; 
void MouseOut()
{
   IsInside= False;
}
}