How Blazor handles the events? onclick:stopPropagation cannot prevent native JS events from bubbling up.

[zxyao145]

I have two components: the child component uses @onclick to add event, while the parent component uses native JS to add events through IJSRuntime.

However, using @onclick:stopPropagation="@true" on the child component does not prevent the parent component from responding to click events.

Is Blazor's handling of events similar to React?

Child.razor

<span style="border: 1px solid red;"
      @onclick="OnClick"
      @onclick:stopPropagation="@true">
    child
</span>

@code {
    private void OnClick()
    {
        Console.WriteLine("child click");
    }
}

Parent.razor

@inject IJSRuntime JsRuntime

<div @ref="@_ref" id="parent">
    <Child />
</div>

@code
{

    private ElementReference _ref;
    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            JsRuntime.InvokeVoidAsync("addClick", _ref);
        }
        return base.OnAfterRenderAsync(firstRender);
    }
}

addClick method:

window.addClick = function (dom) {
    dom.addEventListener("click", (e) => {
        console.log("on click", dom.getAttribute("id"));
    })
}

the log:

[javiercn]

Blazor relies on event delegation and will listen to the events at the root, which means events bubble all the way before they get stopped. If you want to stop the event at the element level you need to use JS interop to setup a handler on the element itself.

[zxyao145]

Thanks very mush!