在一个Vue应用程序中，我有一个带@click函数的按钮（下面代码中的“detach button”）。这个按钮位于一个本身可点击的元素中。点击这个父元素会触发另一个@click函数和一个Bootstrap模态切换事件。
当我单击子按钮时，它会触发父元素的两个事件（@click AND Modal toggle）。
我在子按钮上尝试了@click.stop和@click.prevent，但总是触发父按钮的事件，如何防止触发父按钮的逻辑？
谢谢你的帮助！

<tbody>
    <tr
      v-for="project in $store.state.projectlist"
      :key="project.id"
      class="custompointer"
      @click.stop="storeCurrentProfileProjectBinding(project)"
      data-bs-toggle="modal"
      data-bs-target="#editProjectModal"
    >
      <td>
        <div class="symbol symbol-40px">
          <img
            :src="project.clientlogo"
            class="h-50 align-self-center"
            alt=""
          />
        </div>
      </td>
      <td>

        <div class="d-flex flex-row">
          <a
            href="#"
            class="text-dark fw-bold text-hover-primary fs-6"
          >{{ project.clientname }}</a>
          <div class="ms-1">
            <!--begin:detach button-->
            <a
              href="javascript:void(0)"
              class="text-hover-danger"
              @click.stop="detachFromThisProject(project)"
            >
            </a>
            <!--end:detach button-->
          </div>
        </div>

      </td>

    </tr>

  </tbody>