如何防止 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>

从代码中可以看出，我当前正在使用 引导下拉列表（在我的例子中为 dropleft）组件。 这工作得很好 - 或者更确切地说，如果不是卡上的 @onclick 事件，它会调用代码来选择数据集并导航到另一个页面。

问题基本上是：如果单击其中的元素，如何防止 OnClick 事件。我想，我要问的是：如何防止 HTML 中的事件冒泡？是否可以不向内部下拉元素添加代码（bootstrap-dropdowns 的显示是通过 popper.js 完成的，它是外部的）

Answer 1

哈哈，在发布后 5 分钟此处找到了答案：

只需使用 < code>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，但会阻止事件传播到父元素。