Blazor 6中如何为onmouseenter/onmouseleave事件实现polyfill

.NET 6 版本的Blazor框架未内置mouseenter和mouseleave事件的映射，虽然相关实现已经合并进框架代码，但没有随.NET 6稳定版发布。实际上浏览器本身原生支持这两个事件，只需要通过Blazor的自定义事件能力做一层简单转发即可正常使用，后续升级高版本.NET还能无缝切换到原生实现，无需修改业务代码。

实现步骤如下：

• 在wwwroot目录下新建blazor-mouse-event-polyfill.js文件，写入以下JS代码，通过Blazor自带的自定义事件注册能力，把浏览器原生的mouseenter、mouseleave事件接入Blazor事件管道：

function registerMouseEnterLeavePolyfill() {
    // 注册mouseenter自定义事件
    Blazor.registerCustomEventType('mouseenter', {
        browserEventName: 'mouseenter',
        createEventArgs: event => ({
            ClientX: event.clientX,
            ClientY: event.clientY,
            ScreenX: event.screenX,
            ScreenY: event.screenY,
            AltKey: event.altKey,
            CtrlKey: event.ctrlKey,
            ShiftKey: event.shiftKey,
            MetaKey: event.metaKey,
            Button: event.button,
            Buttons: event.buttons
        })
    });

    // 注册mouseleave自定义事件
    Blazor.registerCustomEventType('mouseleave', {
        browserEventName: 'mouseleave',
        createEventArgs: event => ({
            ClientX: event.clientX,
            ClientY: event.clientY,
            ScreenX: event.screenX,
            ScreenY: event.screenY,
            AltKey: event.altKey,
            CtrlKey: event.ctrlKey,
            ShiftKey: event.shiftKey,
            MetaKey: event.metaKey,
            Button: event.button,
            Buttons: event.buttons
        })
    });
}

• 在应用入口加载脚本并完成注册：
  Blazor Server 项目修改Pages/_Host.cshtml，Blazor WASM项目修改wwwroot/index.html，在框架自带的blazor脚本引用标签之后，加入脚本引用和注册调用代码：

<!-- 原有框架自带的blazor脚本引用，无需修改 -->
<script src="_framework/blazor.server.js"></script>
<!-- 新增以下polyfill相关内容 -->
<script src="blazor-mouse-event-polyfill.js"></script>
<script>
    registerMouseEnterLeavePolyfill();
</script>

• 在组件中直接使用，写法和其他内置鼠标事件完全一致，事件参数直接复用框架自带的MouseEventArgs类型即可，不需要额外定义参数类：

<div style="padding:2rem; border:1px solid #eee;"
     @onmouseenter="OnCardEnter"
     @onmouseleave="OnCardLeave">
    鼠标移入移出测试区域
    <p>@_hoverTip</p>
</div>

@code {
    private string _hoverTip = "请把鼠标移到区域内";

    private void OnCardEnter(MouseEventArgs e)
    {
        _hoverTip = $"鼠标已进入，当前坐标 X:{e.ClientX} Y:{e.ClientY}";
    }

    private void OnCardLeave(MouseEventArgs e)
    {
        _hoverTip = "鼠标已离开区域";
    }
}

补充说明 #

• 该实现直接监听浏览器原生的非冒泡事件，不会出现mouseover/mouseout事件常见的子元素冒泡导致的重复触发问题，行为和标准DOM事件完全一致
• 事件参数结构和.NET 7及以上版本原生内置的这两个事件参数完全对齐，后续升级框架版本时，仅需删除自行添加的JS polyfill代码即可，所有业务组件的事件绑定代码无需任何修改
• 整个实现无第三方依赖，不需要安装额外NuGet包，代码体积极小，运行无额外性能开销

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