How to prevent event bubbling in blazor server side?

Question

In my blazor server side application I have cards representing datasets, which the user can manage. They look like this:

The relevant code looks like this:

<div class="card h-100 text-dark" @onclick="() => OnDatasetSelected(dataset)">
    <!-- header image -->
    <div class="card-body position-relative">
        <div class="dropdown dropstart">
            <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi bi-three-dots-vertical"></i>
            </button>
            <ul class="dropdown-menu">
                <!-- menu content --> 
        </div>
        <!-- card content -->
</div>

As one can see from the code, I'm currently adding the context menu (three vertical dots) using the template code from bootstraps dropdown (dropleft in my case) component. This works fine - or rather it would if it weren't for the @onclick event on the card, which calls the code to select the dataset and navigate to another page.

Question basically is: How can I prevent the OnClick event, if an element inside is being clicked on. I guess, what I'm asking is: How can I prevent event bubbling in HTML? Is it possible without adding code to the inner dropdown element (display of bootstrap-dropdowns is done with popper.js, which is external)

Answer 1

Lol, found the answer here 5 minutes after posting:

Simply use onclick="event.stopPropagation();" to prevent the event bubbling.

So in the end I just add this to the dropdown container:

   <div class="dropdown dropstart position-absolute top-0 end-0 " onclick="event.stopPropagation();">
        <button  type="button" class=" btn btn-outline-secondary fs-5 p-0 m-2 border-0"
                data-bs-toggle="dropdown" aria-expanded="false">
            <i class="bi bi-three-dots-vertical"></i>
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
    </div>

And now I can click my menu button:

Important Edit: In case you have issues with onclick="event.stopPropagation();" preventing the @onclick event of the inner button to be fired, one can use the following directly at the inner button:

<button type="button" @onclick="MyFunction" 
    @onclick:stopPropagation="true">
    Button Text
</button>

This will call MyFunction when clicking the button, but prevents the event to be propagated to the parent elements.