jquery - stopimmediatepropagation - stoppropagation angular

jQuery stopPropagation bubble down

Question

Tengo un div con un enlace dentro de ella:

<div id="myDiv">
    <a href="http://www.lol.com">Lol</a>
</div>

Al hacer clic en <div /> debe ir a alguna parte, pero al hacer clic en el niño <a /> debe ir a www.lol.com. He visto en preguntas anteriores y en el sitio web de jQuery que .stopPropagation evita el burbujeo hacia arriba, pero ¿cómo puedo prevenir una burbuja hacia abajo (no es eso lo que se necesita aquí?).

Answer 1

El problema fue que al hacer clic en el ancla todavía se activó un clic en su <div> . Eso se llama "evento burbujeante".

De hecho, hay múltiples soluciones:

Comprobando en el controlador de eventos de clic DIV si el elemento objetivo real era el ancla → jsFiddle

$(''#myDiv'').click(function (evt) {
    if (evt.target.tagName != "A") {
        alert(''123'');
    }

    // Also possible if conditions:
    // - evt.target.id != "ancherComplaint"
    // - !$(evt.target).is("#ancherComplaint")
});

$("#ancherComplaint").click(function () {
    alert($(this).attr("id"));
});

Detener la propagación de eventos desde el detector de clics de anclaje → jsFiddle

$("#ancherComplaint").click(function (evt) {
    evt.stopPropagation();
    alert($(this).attr("id"));
});

Como habrá notado, he eliminado la siguiente parte del selector de mis ejemplos:

:not(#ancherComplaint)

Esto no fue necesario porque no hay ningún elemento con la clase .expandable-panel- #ancherComplaint que también tenga #ancherComplaint como su ID.

Supongo que quería suprimir el evento para el ancla. Eso no puede funcionar de esa manera porque ambos selectores (el tuyo y el mío) seleccionan exactamente el mismo DIV. El selector no tiene influencia en el oyente cuando se le llama; solo establece la lista de elementos a los que se deben registrar los oyentes. Dado que esta lista es la misma en ambas versiones, no existe diferencia.

Answer 2

Los eventos solo burbujean. Por lo tanto, el controlador de eventos de clic para el elemento a se activa antes que el controlador de eventos de clic para el div . Si desea el comportamiento que describe, debe agregar un controlador de eventos de clic al elemento a que detiene la propagación al div.

$("#myDiv a").click( function(event) {
    event.stopPropagation();
} );

y mantén cualquier controlador de eventos que tengas en el div. Esto debería permitir que el evento realice su acción predeterminada y evitar que el controlador en el div sea activado.

Si solo desea evitar los clics en los enlaces, puede cambiar su controlador de eventos para el elemento div

$("#myDiv").click( function( event ) {
    if( !$( event.target ).is( "a" ) )
    {
        // existing event handler
    }
} );