是否可以在 Blazor 上单击元素外部将其关闭？答案

【问题标题】：It possible to click outside an element to close it on Blazor?是否可以在 Blazor 上单击元素外部将其关闭？
【发布时间】：2021-11-29 14:43:38
【问题描述】：

有点重复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。

感谢解答！

【问题讨论】：

标签： c# blazor blazor-webassembly

【解决方案1】：

我在我的模态仓库中使用它：

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

【讨论】：

【解决方案2】：

我使用以下 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>

【讨论】：

【解决方案3】：

您可以像往常一样使用纯 JS 来执行此操作，只需一点互操作。不过，在这种情况下，您可以使用父元素的 Blazor @onclick 来切换您的可隐藏元素，并使用子元素的 vanilla 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;
}

【讨论】：

【解决方案4】：

这里面有三种场景：

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

【讨论】：

【解决方案5】：

感谢大家的回答，但我有个坏消息 — 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');
        }
    }
}

【讨论】：

嗯。 . .我提供了一个工作示例，可以在 Blazor 中执行您想要的操作。为什么选择使用 JS？
@Bennyboy1973 你的回答还不错，但它只适用于 (@onclick)，而且我全局需要它，而 JS 可以做到这一点。这可能是经验问题，但我现在这么认为。