EventListener 添加到父 div，但如果单击，event.target 将成为子元素

Question

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

卡片

<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.targetExpecting 来获取div我添加了EventListener. 相反，如果我单击卡片h5或p元素，它们就会扰乱event.target我的实现。是否可以采取任何措施来确保event.target始终引用添加到div的父级EventListener？