web-dev-qa-db-ja.com

Blazorでそれを閉じるためにDIVまたは要素の外側をクリックするためのイベント

私のBlazorserver-sideプロジェクト、メニューの外側をクリックしてポップアップメニューを閉じる必要があります。 Ifイベントをトリガして、ポップアップを表示/非表示にするには、単純onClickステートメントを使用します。しかし、ポップアップメニューの外側をクリックしてポップアップを閉じるというイベントはありません。そのため、ユーザーはonClickイベントで要素をクリックするだけで閉じるべきです。だから私の質問は、JSを使用せずにこの問題をよりよく解決できる方法です。

前もって感謝します。

c#.net-coreblazorrazor-pagesblazor-server-side
5
AminM

それはFAFFのちょっとしたJS相互道路でそれを管理しました。私はBlazorに慣れていますが、他のさまざまな投稿からまとめられた聖職者に成功しました。

ポップアップにIDを追加する - Mine Profile-Popupと呼ばれる

<div id="profile-popup">
        <RadzenProfileMenu @ref="profileMenu" Style="width: 200px;" >
            <Template>
                <div class="row">...
 _

ClickのClickイベントにハンドラを添付するJSファイルを作成します。クリックのソースがポップアップにある場合は、それ以外の場合はヘルパークラスからヘルパーメソッドを起動してください。

    window.attachHandlers = (dotnetHelper) => {
    document.addEventListener("click", (evt) => {
        const profileElement = document.getElementById("profile-popup");
        let targetElement = evt.target;

        do {
            if (targetElement == profileElement) {
                //return as not clicked outside
                return;
            }            
            targetElement = targetElement.parentNode;
        } while (targetElement);

        dotnetHelper.invokeMethod("InvokeAction");
    });
};
 _

ヘルパークラスを作成します

public class ProfileOutsideClickInvokeHelper
{
    Action _action;

    public ProfileOutsideClickInvokeHelper(Action action)
    {
        _action = action;
    }

    [JSInvokable]
    public void InvokeAction()
    {
        _action.Invoke();
    }
}
 _

OnAfterRenderのオーバーライドのハンドラを接続します。ポップアップを含むコンポーネントがあります。オブジェクト参照を廃棄する必要があります

public partial class TopBanner : IDisposable
{        
    [Inject]
    IJSRuntime JSRuntime { get; set; }

    public void CloseProfileMenu()
    {
        profileMenu.Close();
    }

    DotNetObjectReference<ProfileOutsideClickInvokeHelper> _objRef;

    protected override void OnAfterRender(bool firstRender)
    {
        _objRef = DotNetObjectReference.Create(new ProfileOutsideClickInvokeHelper(CloseProfileMenu));
        JSRuntime.InvokeVoidAsync("attachHandlers", _objRef);
    }

    public void Dispose()
    {
        _objRef?.Dispose();
    }
}
 _

これが最善の解決策、あるいは良いものでさえもよくわかりませんが、問題が発生したようです。

0
pilsdumps

OnMouseoverイベントを使用して、JSを使用せずにソリューションを検索しました。

 <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;
}
}
 _
0
NetoTI