eventlistener添加到父级，但是event.target成为儿童元素，如果单击

Question

我正在使用卡片形状的 div ，我需要可以点击它。我使用 JS (stimulusJS) 向它们添加一个 EventListener ，这样当用户单击卡片时，事件侦听器就会被触发，添加一些 CSS 类并使用来自卡片的数据填充一些隐藏字段。 div 的数据集。

卡

<div class="card d-flex flex-column data-selectable-target="selectable" data-pricing-model-value="flat_fee">
   <div class="self-end">
      <strong>
        <span class="mr-3" data-toggle="tooltip" title="<%= t(".tooltip") %>"><%= icon("exclamation-circle", classes: "h-4 w-4") %></span>
      </strong>
   </div>
   <h5><%= t(".title") %></h5>
   <p> <%= t(".description") %></p>
</div>

JS控制器

import { Controller } from 'stimulus';

export default class extends Controller {
  static targets = ["selectable"]

  connect() {
    this.selectableTargets.forEach((element) => {
      element.addEventListener("click", (event) => {
        this.select(event.target);
      });
    })
  }

  select(element) {
    element.classList.add("selected")
    this.selectableTargets.forEach((target) => {
      if (target != element) {
        target.classList.remove("pricing-model-selected")
      }
    })
  }
}

问题： 我正在使用 event.target 期望获得我添加了 EventListener 的父 div。 相反，如果我单击卡片的 h5 或 p 元素，它们就会成为 event.target 扰乱我的实现。 有什么办法可以确保 event.target 始终引用添加了 EventListener 的父 div 吗？