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?
onclick
hacia el padre colocando en el hijoonclick="event.stopPropagation()"
. De cualquier manera como menciona @masterguru el tooltip se deberia mostrar sin tener que pulsar el botón.modal
y no se porque he puesto lo detooltip
, ahora mismo edito la pregunta, eltooltip
funciona correctamente.