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

Question

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

先感谢您。

Answer 1

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

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

我在 blazor webassambly 应用程序中使用了它，但对于服务器端应该是相同的。

Answer 2

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

请注意，在弹出窗口中，当您从弹出窗口内部关闭弹出窗口时，您还需要将浮动 Div 显示值设置回“无”，否则它会一直存在并需要额外单击才能使其消失。

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

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;
}
}

Answer 4

@onmouseout我的标签内的事件确实div有效，但对于我需要的东西来说有点太敏感了，因为我div有几个孩子，所以当我不希望它关闭时，它一直关闭。我发现这个解决方案更可靠。

我创建了一个事件处理程序类

[EventHandler("onmouseleave", typeof(EventArgs), true, true)]
public class EventHandlers
{
}

然后在我的剃刀页面中：

<div class="menu" @onmouseleave="MouseLeave"></div>

@code {
    private void MouseLeave(EventArgs args)
    {
        IsVisible = false;
    }
}