jQuery stopPropagation burbuja hacia abajo

Tengo un div con un enlace dentro de él:

Lol

Al hacer clic en

debería ir a alguna parte, pero al hacer clic en el niño debe ir a www.lol.com. He visto en las preguntas anteriores y en el sitio web de jQuery que .stopPropagation previene el burbujeo hacia arriba, pero ¿cómo puedo evitar una burbuja hacia abajo? (¿No es eso lo que es necesario aquí?).

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

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

y mantenga el manejador 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 clics en enlaces, puede cambiar su controlador de eventos para el elemento div

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

El problema era que al hacer clic en el ancla todavía se activaba un clic en su

. Eso se llama “evento burbujeante”.

De hecho, hay múltiples soluciones:

Comprobando en el controlador de eventos de clic de 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 del evento desde el escucha de clic de ancla → jsFiddle

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

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

 :not(#ancherComplaint) 

Esto fue innecesario porque no hay ningún elemento con el encabezado de clase .expandable-panel-heading 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 el mismo DIV exacto. El selector no tiene influencia en el oyente cuando se lo llama; solo establece la lista de elementos a los que los oyentes deben registrarse. Como esta lista es la misma en ambas versiones, no existe diferencia.

    Intereting Posts