jQuery stopPropagation burbuja abajo

Question

jQuery stopPropagation burbuja abajo

Tengo un div con un enlace dentro de él:

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

Hacer clic en el {[1] } debe ir a alguna parte, pero hacer clic en el niño <a /> debe ir a www.lol.com. He visto desde preguntas anterioresy el sitio web jQuery que .stopPropagation evita burbujear hacia arriba, pero ¿cómo puedo evitar una burbuja hacia abajo (no es eso lo que es necesario aquí?).

29

jquery event-bubbling

Author: Community, 2010-04-28

Source

2 answers

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

De hecho, hay múltiples soluciones:

Comprobando en el manejador de eventos de clic DIV si el elemento de destino 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 oyente de clic de anclaje → jsFiddle

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

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

:not(#ancherComplaint)

Esto era innecesario porque no hay ningún elemento con la clase .expandable-panel-heading que también tiene #ancherComplaint como ID.

Asumo que querías 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 llama; solo establece la lista de elementos a los que los oyentes deben registrarse. Dado que esta lista es la misma en ambas versiones, no existe diferencia.

3

Author: Vijay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-10 15:03:41

score 44 · Accepted Answer

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 detenga la propagación al div.

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

Y mantenga cualquier controlador de eventos que tenga en el div. Esto debería permitir que el evento realice su acción predeterminada, y evitar que el controlador en el div se dispare.

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

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