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 "tooltip"modal
(que es una "PopUp" de "boostrap") pero también se ejecuta el método "onclick"onclick
del botón que lo contiene.
¿Alguien podría decirme si hay alguna forma de evitar que esto ocurra?