Skip to main content
Corrección del texto sobre el problema
Origen Enlace
Fran Cámara
  • 722
  • 1
  • 6
  • 21

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?

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

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?

Arreglo de código mal puesto
Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28

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 que<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" 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?

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 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 , muestra correctamente el "tooltip" 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?

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

Origen Enlace
Fran Cámara
  • 722
  • 1
  • 6
  • 21

Configurar acción click de un <a> que se encuentra en un <button>

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 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 , muestra correctamente el "tooltip" 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?