1

He diseñado unas tarjeta que representan un mensaje, esta tarjeta es un botón con varios componentes más, uno de ellos es un <a> que actúa como botón.

El código sería así:

<button id="message" class="btn btn-lg btn-primary" onclick="getMessage('{{ $message -> id }}', '{{ $type_user }}')">
    <div class="row">
        <div id="top" class="col-md-12">
            <div class="row">
                <div class="col-md-2">
                </div>

                <div class="col-md-8">
                    <p>{{ $message -> text }}</p>
                </div>

                <div class="col-md-2">
                    <a type="button" class="btn btn-secundary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
                        <i class="fas fa-trash-alt" data-bs-toggle="tooltip" data-bs-placement="right" title="Eliminar mensaje"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

El problema es que al "clickar" sobre el <a>, muestra correctamente el modal (que es una "PopUp" de "boostrap") pero también se ejecuta el método onclick del botón que lo contiene.

¿Alguien podría decirme si hay alguna forma de evitar que esto ocurra?

5
  • El tooltip se deberia mostrar sin tener que pulsar el botón. Deja el ratón sobre la imagen de la basura y espera al tooltip... si no se muestra es que algo has definido para que no se muestre o bien no lo has activado correctamente (los tooltips no estan activos por defecto, deben activarse antes de usarse)
    – masterguru
    Commented el 21 abr. 2022 a las 19:51
  • 2
    Puedes evitar la propagación del evento onclick hacia el padre colocando en el hijo onclick="event.stopPropagation()". De cualquier manera como menciona @masterguru el tooltip se deberia mostrar sin tener que pulsar el botón.
    – Jaime
    Commented el 21 abr. 2022 a las 19:57
  • 1
    Perdona @masterguru, quería expresar modal y no se porque he puesto lo de tooltip, ahora mismo edito la pregunta, el tooltip funciona correctamente. Commented el 21 abr. 2022 a las 20:26
  • Muchas gracias @JaimeMenéndez, tu sugerencia ha funcionado perfectamente. Commented el 21 abr. 2022 a las 20:32
  • 1
    De nada @FranCámara. Lo agregué como respuesta para futuras referencias.
    – Jaime
    Commented el 21 abr. 2022 a las 20:48

1 respuesta 1

2

Para evitar la propagación del evento click al elemento padre utiliza el método stopPropagation() de la interfaz Event. Para ello simplemente agrega onclick="event.stopPropagation()" al elemento hijo para que no dispare el evento en el padre.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.