UNO WASM项目原生控件无法接收事件冒泡相关配置问询

问题根因 #

Uno WASM 为了适配XAML的事件体系，默认会在DOM事件的捕获阶段拦截所有指针、输入类事件，统一交给Uno内部的事件路由处理，你直接通过JS注入的原生DOM元素的事件会在捕获阶段就被拦截，无法触发绑定的回调。

方案1：针对指定容器放行事件（推荐） #

不需要全局修改配置，只需要给你存放原生DOM的容器添加Uno专属的uno-ignore-pointer-events属性，Uno会直接跳过这个容器及其所有子节点的事件拦截，原生DOM的事件可以正常触发。

修改后的代码示例：

[HtmlElement("div")]
public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.SetHtmlAttribute("id", "MyDiv");
        // 关键配置：告诉Uno不要拦截该容器下的所有DOM事件
        this.SetHtmlAttribute("uno-ignore-pointer-events", "true");
        this.InitializeComponent();

        // 用页面加载事件代替固定延时，可靠性更高
        _ = InitNativeButton();
    }

    private async Task InitNativeButton()
    {
        await this.LoadedAsync();
        WebAssemblyRuntime.InvokeJS("document.getElementById(\"MyDiv\").innerHTML = \"<button onclick=\\\"alert('clicked')\\\">test</button>\"");
    }
}

方案2：全局关闭事件拦截（不推荐） #

如果需要全局允许所有原生DOM事件触发，可以在WASM项目的Program.cs启动配置中关闭指针事件拦截，该修改会导致所有Uno内置XAML控件的事件处理异常，非必要不要使用。
配置代码示例：

public static void Main(string[] args)
{
    var appBuilder = Uno.UI.ApplicationBuilder.Create<AppHead>();
    appBuilder.ConfigureUnoCallbacks(options => 
    {
        // 全局关闭Uno的DOM事件拦截
        options.InterceptPointerEvents = false;
    });
    appBuilder.Build().Run();
}

注意事项 #

• 标记了uno-ignore-pointer-events的容器内不要放置Uno原生的XAML控件，这些控件的事件会因为被跳过拦截而无法正常触发
• 尽量不要使用固定延时等待页面渲染，推荐使用LoadedAsync扩展方法等待页面加载完成，兼容性更强
• 如果需要在原生DOM事件和C#代码之间交互，优先使用Uno提供的HtmlElement相关API创建原生元素，比直接注入innerHTML更易维护

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