Estoy trabajando con div en forma de tarjeta en los que necesito poder hacer clic. Estoy usando JS (stimulusJS) para agregarles un EventListener , de modo que cuando el usuario hace clic en la tarjeta, el detector de eventos se dispara agregando algunas clases de CSS y llenando algunos campos ocultos con datos que provienen del conjunto de datos div s.

tarjeta

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

controlador 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") } }) } }

Problema: estoy usando event.target esperando obtener el div principal al que agregué EventListener . En cambio, si hago clic en los elementos h5 o p de la tarjeta, se convierten en el event.target estropeando mi implementación. ¿Hay algo que se pueda hacer para garantizar que event.target siempre se refiera al div principal al que se agregó EventListener ?