好長時間沒繼續寫這個系列博客了, 不知道大家還記得我嗎? 話不多說,直接開擼.

1. 新建 net8 blazor 工程 b19LongPressButton

至于用什么模式大家各取所需, 我創建的是ssr單工程, App.razor 里面改一下, 加入 @rendermode="RenderMode.InteractiveServer" 這句話, 默認使用ssr模式渲染.

<Routes @rendermode="RenderMode.InteractiveServer" />

2. Components\Pages 下新建組件 LongPressButton.razor

@inherits ComponentBase

<div @onclick="onClick" @oncontextmenu="onContextMenu" @ontouchstart="OnTouchStart" @ontouchend="OnTouchEnd">
    @ChildContent
</div>


@code {


    [Inject]
    private IJSRuntime? JS { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    bool IsEdit { get; set; } = false;

    private Task ValueChangedOnConfirm()
    {
        IsEdit = false;
        return Task.CompletedTask;
    }

    /// <summary>
    /// 獲得/設置 啟用長按
    /// </summary>
    [Parameter]
    public bool LongPress { get; set; } = true;

    /// <summary>
    /// 獲得/設置 ContextMenu 菜單項回調委托
    /// </summary>
    [Parameter]
    public Func<MouseEventArgs, Task>? OnContextMenu { get; set; }

    /// <summary>
    /// 獲得/設置 長按回調委托, 如果啟用長按并且不是觸摸設備,則回落到 Click 點擊時觸發
    /// </summary>
    [Parameter]
    public Func<MouseEventArgs, Task>? OnLongPress { get; set; }

    /// <summary>
    /// 獲得/設置 Click 回調委托
    /// </summary>
    [Parameter]
    public Func<MouseEventArgs, Task>? OnClick { get; set; }

    /// <summary>
    /// 獲得/設置 長按延時
    /// </summary>
    [Parameter]
    public int OnTouchTime { get; set; } = 500;

    /// <summary>
    /// ContextMenu 菜單項點擊時觸發
    /// </summary>
    /// <returns></returns>
    Task onContextMenu(MouseEventArgs args)
    {
        if (OnContextMenu != null)
        {
            return OnContextMenu.Invoke(args);
        }
        else
        {
            return Task.CompletedTask;
        }
    }

    /// <summary>
    /// 點擊時觸發
    /// </summary>
    /// <returns></returns>
    Task onClick(MouseEventArgs args)
    {
        if (OnClick != null)
        {
            return OnClick.Invoke(args);
        }
        else if (OnLongPress != null && !IsTouchDevice)
        {
            return OnLongPress.Invoke(args);
        }
        else
        {
            return Task.CompletedTask;
        }
    }

    /// <summary>
    /// 是否觸摸設備
    /// </summary>
    private bool IsTouchDevice { get; set; }

    /// <summary>
    /// 是否觸摸
    /// </summary>
    private bool TouchStart { get; set; }

    /// <summary>
    /// 觸摸定時器工作指示
    /// </summary>
    private bool IsBusy { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            IsTouchDevice = await JS!.InvokeAsync<bool>("eval", $"'ontouchstart' in document.documentElement");
        }
    }

    private async Task OnTouchStart(TouchEventArgs e)
    {
        if (!IsBusy)
        {
            IsBusy = true;
            TouchStart = true;

            // 延時保持 TouchStart 狀態
            await Task.Delay(OnTouchTime);
            if (TouchStart)
            {
                var args = new MouseEventArgs()
                {
                    ClientX = e.Touches[0].ClientX,
                    ClientY = e.Touches[0].ClientY,
                    ScreenX = e.Touches[0].ScreenX,
                    ScreenY = e.Touches[0].ScreenY,
                    Type = "LongPress"
                };

                // 彈出關聯菜單
                if (OnContextMenu != null)
                    await OnContextMenu(args);

                if (OnLongPress != null)
                    await OnLongPress(args);

                //延時防止重復激活菜單功能
                await Task.Delay(OnTouchTime);
            }
            IsBusy = false;
        }
    }

    private void OnTouchEnd()
    {
        TouchStart = false;
    }

}

3. 回到首頁 Home.razor 添加組件測試

@page "/"

<PageTitle>Home</PageTitle>

 <LongPressButton OnLongPress="TaskOnLongPress" > 
        <div style="width:200px;height:100px;background-color:gold;">
            <p>LongPressButton</p>
        </div> 
</LongPressButton>

<p>@message</p>

@code {
    string message = "No long press";

    private Task TaskOnLongPress(MouseEventArgs e)
    {
        message = e.Type;
        StateHasChanged();
        return Task.CompletedTask;
    }
}

4. 測試

運行程序

普通瀏覽器模式, 不支持觸摸,會自動會落到點擊事件, 點擊顯示為 Click

**F12打開開發者工具, 點擊模擬手機/平板, 需要F5刷新頁面重新讀取是否為觸摸設備, 點擊無反應, 長按顯示為 **

總結

以上是生活随笔為你收集整理的Blazor入门100天 : 自做一个支持长按事件的按钮组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。