1. Inicio
  2. Pregunta y respuesta
  3. jQuery: Evento que burbujea y cómo "clic", "live.click", "stopPropagation" y "return false" funcionan juntos

jQuery: Evento que burbujea y cómo "clic", "live.click", "stopPropagation" y "return false" funcionan juntos

2011-05-03 20 views
8

Voy a tener el escenario de parejas aquí. Por favor me ayude ajQuery: Evento que burbujea y cómo "clic", "live.click", "stopPropagation" y "return false" funcionan juntos

Aquí es el caso base: http://jsfiddle.net/2zsLy/9/

Cuando hago clic Click Me, tanto cuadro de alerta y Another Paragraph salir. Esto es esperado ya que el evento click hace burbujas en el contenedor principal, que es body. Ahora empiezan mis preguntas

1) http://jsfiddle.net/2zsLy/10/

¿Cómo es que la adición de return false a mi live.click no impide que el evento click de burbujear. En el ejemplo, el live.click burbujea y activa el cuadro de alerta. Pensé que la documentación decía que devolver falso detendrá el evento en vivo desde la burbuja.

2) http://jsfiddle.net/2zsLy/11/

Ahora, puedo cambiar el evento click en body-live.click y se soluciona el problema -> el evento click no burbujea hacia arriba (por lo tanto, no se muestra ningún cuadro de alerta). ¿Por qué no funciona live.click y click?

3) http://jsfiddle.net/2zsLy/13/

creo que la documentación dice claramente que llamar event.stopPropagation() no detendrá el burbujeo que se produzcan, así que acabo de hacer. Uso event.stopPropagation() esperando que todavía active mi cuadro de alerta, pero no es así. ¿Por qué?

NOTA: para la respuesta a las dos primeras preguntas, vea justkt respuestas. Para la respuesta a la última pregunta, vea Squeegy respuesta y su respuesta.

Fuente

2011-05-03 Thang Pham

Respuesta

11

Las respuestas a sus preguntas se pueden encontrar en los documentos event.stopPropagation().

En lo que respecta a vivir ('clic') frente a un 'clic' y burbujeante:

Desde el .live() método gestiona los eventos una vez que se han propagado a la parte superior del documento, no es posible para detener la propagación de eventos en vivo. De forma similar, los eventos manejados por .delegate() siempre se propagarán al elemento al que están delegados; los controladores de eventos en cualquier elemento debajo ya se habrán ejecutado para cuando se llame al controlador de eventos delegados.

Lo que está viendo es el comportamiento esperado. en vivo ('clic') no parará de burbujear. Lo mismo se aplica al ahora preferido .delegate().

This answer describe ampliamente los problemas de detener la propagación cuando se usa .live. Véase también el .live() documention:

El evento se propaga hacia arriba hasta llegar a la raíz del árbol, que es donde .live() se une a sus manipuladores especiales por defecto.

  • A partir de jQuery 1.4, el burbujeo del evento puede detenerse opcionalmente en un elemento DOM "context".

Con respecto a sí stopPropagation:

Mata al burbujeo en el evento click.

Así stopPropagation() debe prevenir el burbujeo donde return false; será, aunque no donde no lo hará. Es preventDefault() que no evitará el burbujeo. return false; es efectivamente stopPropagation() y preventDefault().

En respuesta a cada ejemplo de jsfiddle.

1) http://jsfiddle.net/2zsLy/10/

return false; no impedirá eventos ligadas usando live o delegate de burbujeando. La documentación dice esto explícitamente sobre todos los borboteos, ya sea que se haga con return false; o con stopPropagation(). Así que lo que sucede es

  1. Haga clic en <p>
  2. Haga clic en burbujas a <body>, donde body.click() se activa
  3. Haga clic en las burbujas para documentar la raíz, donde coincide con $(event.target).closest('p'); y así live('click') se invoca
  4. return false sucede, pero se invocó el controlador de cuerpo en el paso 2

2) http://jsfiddle.net/2zsLy/11/

En este caso el evento llega al mismo lugar, (raíz del documento) y el retorno falsa detiene la propagación al evento más unido a través de live, que está en el cuerpo.

  1. Haga clic en <p>
  2. Haga clic en las burbujas de <body>, pero como manejador del cuerpo está unido a través de vivir no se interpone todavía
  3. Haga clic en las burbujas para documentar la raíz, donde coincide con $(event.target).closest('p'); y así live('click') se invoca
  4. El retorno falso ocurre
  5. live('click') no se invoca en el cuerpo debido a la devolución falsa.

3) http://jsfiddle.net/2zsLy/13/

stopPropagation() se utiliza expresamente para evitar el burbujeo, aunque tiene las mismas restricciones return false; hace - por lo que no impedirá que en el caso de un evento de live('click') si hay son manejadores de clics atados a través de bind.

Fuente

2011-05-03 17:46:09 justkt

+0

No creo que respondas mi pregunta en absoluto. Solo cito la documentación, ninguna que yo no sepa. Para cada escena, incluyo jsfiddle para demostrar mi pregunta. Por favor refiérase a ellos. –

+0

@Harry - He editado mi respuesta para abordar cada ejemplo de jsfiddle. – justkt

+0

Muchas gracias. Tu respuesta en '1' y' 2' me da mucha ayuda. Sin embargo, para '3', no quiere decir que está equivocado, pero aquí está la cita del sitio jQuery' Para evitar que otros manejadores se ejecuten después de un enlace usando .live(), el manejador debe devolver falso. Llamar a .stopPropagation() no logrará esto. "Desde arriba,' Squeegy' hace una respuesta y algunos comentarios sobre '3', ¿está de acuerdo con su respuesta para' 3', justkt? –

2

  1. Eventos en vivo SIEMPRE suceden después de eventos de vinculación (como llamar al click(fn)). Entonces return false no hace nada aquí porque $("body").click() ya sucedió. Esto se debe a burbujeo. El clic ocurre en cada elemento primario del elemento en el que hizo clic, lo que activa cada evento de clic. Solo cuando aparece en el documento raíz, activa cualquier evento en vivo.

  2. En este ejemplo, tiene 2 eventos en vivo. Por lo tanto, el evento surge hasta el documento, y jQuery comienza a ejecutar cualquier evento en vivo que encuentre que coincida con su clic. Cuando obtiene un return false deja de ejecutar cualquier otro evento en vivo. Y los eventos en vivo declarados primero, se ejecutan primero. Así que obtienes el nuevo párrafo, pero nada más ya que la alerta se agregó a la pila de eventos en vivo DESPUÉS del p clic en vivo.

  3. No parará la propagación para los eventos de vinculación, pero el argumento event es en realidad un objeto envoltorio de eventos jQuery, y creo que sabe acerca de live. Por lo tanto, tiene un efecto similar al devolver falso, evita que el manejador de clics del documento ejecute eventos en vivo adicionales.

Fuente

2011-05-03 17:54:12

+0

Excelente respuesta en '1' y' 2'. No estoy seguro de entender su respuesta para '3'. Entonces 'event.stopPropagation()' no detuvo la propagación, ¿qué detiene la propagación, Squeegy? –

+3

Paró la propagación lateral, no vertical. '$ ('p'). live ('click', fn)' enlaza un manejador 'click' al documento.Pueden producirse múltiples eventos en vivo a partir de un solo clic porque ese manejador de clic recorre todos los eventos en vivo registrados e intenta hacer coincidir el selector que proporcionó con el elemento que inició el evento. Si hay una coincidencia, ejecuta su función. 'event.stopPropagation()' le dice a jQuery que aborte ese ciclo temprano. Para que no detenga el burbujeo del evento, está impidiendo que el manejador de clics del "documento" encuentre elementos adicionales para "hacer clic". –

+0

Muchas gracias. –

Cuestiones relacionadas

 Cuestiones relacionadas