可以在元素外部单击以在 Blazor 上将其关闭吗？

Question

有点重复Event for click outside a div or element to close it on Blazor，但没有正确答案。

（而且我在 Google 中没有找到与我的主题相关的任何内容）

在 JS 中我只使用“window.onclick”和“!event.target.matches('class')”，Blazor 能提供什么？能不能像JS一样，短小精悍的实现？还是没用？

以防万一 - 我想用 C# 来做，但如果解决方案“不太乐观”，那么我会选择 JS。

感谢解答！

Answer 1

您可以像往常一样使用纯 JS 来执行此操作，只需一点互操作。不过，在这种情况下，您可以使用父元素的 Blazor @onclick 来切换可隐藏元素，并使用子元素的普通 onclick 事件来防止点击它到达父元素。

<div style="width:500px;height:500px; background-color:pink" @onclick="()=>IsClosed=true">
    @if(!IsClosed)
    {
        <div style="width:300px; height: 300px; background-color: black; color:white" 
                onclick="event.stopPropagation();">Click outside to close me.</div>
    }
</div>
@code {
    bool IsClosed;
}

Answer 2

我在我的模式回购中使用它：

    <div class="modal-outer" @onclick="OnBackgroundClicked">
        <div class="modal-inner" @onclick:stopPropagation="true">
            @ModalService.ModalFragment
        </div>
    </div>

Answer 3

这里面有三种情况：

该元素可以有 'focus'（例如文本框）。在那种情况下，只需使用 onblur html event
该元素没有焦点，但其容器可以检测到鼠标点击。在这种情况下，请在容器上使用 onclick 事件。
元素及其容器都不能具有有用的 onclick（例如，它们具有与单击关联的其他一些操作）。在那种情况下，将整个事物视为模态。即背景上的容器具有足够高的 z-index。用容器的onclick事件注册隐藏背景的方法

Answer 4

感谢大家的回答，但我有个坏消息 — https://github.com/dotnet/aspnetcore/issues/28820

他们近期不打算做这个，C#就不用“拐杖”了，我就用JS吧

在 JS 代码中它看起来像这样：

window.onclick = function(event) {
    var dropdowns = document.getElementsByClassName("Class__name");

if (!event.target.matches('.js-close')) {
    for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
        }
    }
}

Answer 5

我使用以下 Tailwind 技巧在没有 js 的情况下完成此行为。

<div class="fixed inset-0 transition-opacity" @onclick=@HideDatePicker></div>
<div class="transform">
@*clicking on and arround this div is not affected.*@
</div>

可以在元素外部单击以在 Blazor 上将其关闭吗？

It possible to click outside an element to close it on Blazor?

c#

blazor

blazor-webassembly