Blazor - stopPropagation on event for dynamically created DOM with RenderTreeBuilder

Question

I have a component class that generates DOM dynamically. I need to be able to stopPropagation on events like onclick, onmouseup etc.

protected override void BuildRenderTree(RenderTreeBuilder builder)
{
        int i = 0;
        base.BuildRenderTree(builder);
        builder.OpenElement(i++, Tag);
        builder.AddAttribute(i++, "class", Class);
}

I tried to add another attribute and event handler like this, but I'm not sure how to access event variable in the handler:

builder.AddAttribute(i++, "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, OnClick));

private void OnClick()
{
   //e.StopPropagation() how do I get event here?      
}

Answer 1

The WebRenderTreeBuilderExtensions class provides extension methods for managing event behavior.

In your case, you can stop the propagation by using the AddEventStopPropagationAttribute extension method:

protected override void BuildRenderTree(RenderTreeBuilder builder)
{
    int i = 0;
    base.BuildRenderTree(builder);
    builder.OpenElement(i++, Tag);
    builder.AddAttribute(i++, "class", Class);
    builder.AddAttribute(i++, "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, OnClick));
    builder.AddEventStopPropagationAttribute(i++, "onclick", true);
}

private void OnClick()
{
    // Handle your event   
}