Blazor WASM（FluentUI 4.10.3）如何检测鼠标点击时Ctrl键是否按下？

方法一：利用Blazor内置参数直接检测 #

这是最简便的实现方式，Blazor的点击事件参数MouseEventArgs自带CtrlKey属性，可直接判断点击瞬间Ctrl键的状态：

<div @onclick="CheckCtrlStatus" style="padding: 20px; border: 1px solid #eee;">
    点击此容器检测Ctrl键状态
</div>

@code {
    private void CheckCtrlStatus(MouseEventArgs e)
    {
        if (e.CtrlKey)
        {
            Console.WriteLine("点击时Ctrl键处于按下状态");
        }
        else
        {
            Console.WriteLine("点击时Ctrl键未按下");
        }
    }
}

方法二：全局监听Ctrl键状态（适合实时判断场景） #

如果需要在点击操作前就知晓Ctrl键的状态（比如 hover 元素时判断），可以通过JS互操作全局监听Ctrl的按下/抬起事件，将状态同步到Blazor组件中：

1. 组件代码 #

@inject IJSRuntime JSRuntime

<div @onclick="CheckStoredCtrlState" style="padding: 20px; border: 1px solid #eee;">
    点击此容器检测Ctrl键状态（全局监听版）
</div>

@code {
    private bool _isCtrlPressed;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 注册全局按键监听逻辑
            await JSRuntime.InvokeVoidAsync("registerCtrlListener", DotNetObjectReference.Create(this));
        }
    }

    [JSInvokable]
    public void UpdateCtrlState(bool isPressed)
    {
        _isCtrlPressed = isPressed;
        StateHasChanged();
    }

    private void CheckStoredCtrlState()
    {
        if (_isCtrlPressed)
        {
            Console.WriteLine("点击时Ctrl键处于按下状态");
        }
        else
        {
            Console.WriteLine("点击时Ctrl键未按下");
        }
    }
}

2. 在wwwroot/index.html中添加JS代码 #

<script>
    window.registerCtrlListener = (dotNetComponent) => {
        // 监听Ctrl按下事件
        document.addEventListener('keydown', e => {
            if (e.key === 'Control') {
                dotNetComponent.invokeMethodAsync('UpdateCtrlState', true);
            }
        });

        // 监听Ctrl抬起事件
        document.addEventListener('keyup', e => {
            if (e.key === 'Control') {
                dotNetComponent.invokeMethodAsync('UpdateCtrlState', false);
            }
        });
    };
</script>

关于单独按Ctrl无法触发KeyDown事件的说明 #

浏览器默认不会对单独按下Ctrl这类修饰键触发常规的keydown事件（这是浏览器原生行为，与FluentUI无关），若仅需在点击时检测Ctrl状态，上述两种方法已完全满足需求。

内容的提问来源于stack exchange，提问作者user3079834