如何防止 blazor 服务器端的事件冒泡？

Question

在我的 Blazor 服务器端应用程序中，我有代表数据集的卡片，用户可以管理这些卡片。它们看起来像这样：

相关代码如下所示：

<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>

从代码中可以看出，我目前正在使用 bootstraps dropdown (dropleft in my case) component 中的模板代码添加上下文菜单（三个垂直点）。这工作正常 - 或者更确切地说，如果它不是卡片上的 @onclick 事件，它会调用代码到 select 数据集并导航到另一个页面。

问题基本上是：如果单击内部元素，我怎样才能阻止 OnClick 事件。我想，我想问的是：如何防止 HTML 中的事件冒泡？是否可以不向内部下拉元素添加代码（bootstrap-下拉列表的显示是使用 popper.js 完成的，这是外部的）

Answer 1

大声笑，发帖 5 分钟后找到答案 here：

简单地使用onclick="event.stopPropagation();"来防止事件冒泡。

所以最后我只是将其添加到下拉容器中：

   <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>

现在我可以点击菜单按钮了：

重要编辑： 如果您遇到 onclick="event.stopPropagation();" 阻止触发内部按钮的 @onclick 事件的问题，可以直接在内部按钮上使用以下内容：

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

这将在单击按钮时调用 MyFunction，但会阻止事件传播到父元素。

如何防止 blazor 服务器端的事件冒泡？

How to prevent event bubbling in blazor server side?

html

javascript

onclick

event-bubbling

blazor