1. casa
  2. Domanda e risposta
  3. jQuery: evento Bubbling e in che modo "click", "live.click", "stopPropagation" e "return false" funzionano insieme

jQuery: evento Bubbling e in che modo "click", "live.click", "stopPropagation" e "return false" funzionano insieme

2011-05-03 9 views
8

Qui avrò uno scenario per coppie. Please help mejQuery: evento Bubbling e in che modo "click", "live.click", "stopPropagation" e "return false" funzionano insieme

Ecco il caso base: http://jsfiddle.net/2zsLy/9/

Quando clicco Click Me, sia avviso scatola e Another Paragraph uscire. Questo è previsto dal momento in cui l'evento click si presenta fino al contenitore principale, ovvero body. Ora iniziano le mie domande

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

Come mai l'aggiunta return false alla mia live.click non si ferma l'evento click da bolla. Dall'esempio, il live.click si apre e attiva la casella di avviso. Pensavo che la documentazione dicesse che return false fermerebbe l'evento dal vivo dalla bolla.

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

Ora, posso cambiare l'evento click in body-live.click e risolve il problema -> l'evento click non si bolla (da qui viene mostrato alcuna finestra di avviso). Perché lo live.click funziona e lo click no.

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

penso che la documentazione ha detto chiaramente che la chiamata event.stopPropagation() non fermerà la zampillante si verifichi, così ho appena fatto. Io uso event.stopPropagation() aspettandomi che possa ancora attivare la mia casella di avviso, ma non è così. Perché?

NOTA: per la risposta delle prime due domande, vedere le risposte justkt. Per la risposta all'ultima domanda, vedere Squeegy risposta e la sua risposta.

fonte

2011-05-03 Thang Pham

risposta

11

Le risposte alle tue domande sono disponibili nei documenti event.stopPropagation().

per quanto riguarda il vivere ('click') rispetto a 'click' e spumeggiante:

Poiché il .Live() metodo gestisce gli eventi una volta che hanno propagato alla parte superiore del documento, non è possibile per interrompere la propagazione di eventi dal vivo. Allo stesso modo, gli eventi gestiti da .delegate() si propagano sempre all'elemento a cui sono delegati; i gestori di eventi su qualsiasi elemento sottostante saranno già stati eseguiti dal momento in cui viene chiamato il gestore di eventi delegato.

Quindi quello che state vedendo è un comportamento previsto. live ('click') non smetterà di ribollire. Lo stesso vale per l'ora preferito .delegate().

This answer descrive in modo estensivo i problemi di arresto della propegazione quando si utilizza .live. Vedere anche il .live() documention:

L'evento emerge fino alla radice dell'albero, che è dove .Live() si lega suoi gestori speciali per default.

  • A partire da jQuery 1.4, il bubbling degli eventi può facoltativamente fermarsi a un "contesto" di elementi DOM.

Per quanto riguarda stopPropagation stessa:

uccidere il gorgogliare sull'evento click.

Così stopPropagation() dovrebbe evitano la spumeggiante ovunque return false; sarà, anche se non dove non lo farà. È preventDefault() che non impedirà il bubbling. return false; è effettivamente stopPropagation() e preventDefault().

In risposta a ciascun esempio di jsfiddle.

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

return false; non impedirà eventi legati utilizzando live o delegate da ribolle. La documentazione dice esplicitamente su tutto il bubbling, sia con return false; sia con stopPropagation(). Quindi, quello che succede è

  1. Cliccare sulla <p>
  2. Fare clic su bolle per <body>, dove body.click() scatta
  3. Fare clic su bolle di documentare radice, dove si abbina $(event.target).closest('p'); e così live('click') viene richiamato
  4. ritorno falso accade, ma gestore corpo è stato richiamato al punto 2

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

In questo caso l'evento arriva allo stesso punto (root documento) e il ritorno falso arresta la propagazione all'ulteriore evento vincolato tramite live, che è sul corpo.

  1. Cliccare sulla <p>
  2. Clicca bolle di <body>, ma dal momento che gestore del corpo è attaccato tramite Live non è ancora invocato
  3. Fare clic su bolle di documentare radice, dove si abbina $(event.target).closest('p'); e così live('click') viene richiamato
  4. Restituisce falso succede
  5. live('click') non è invocato sul corpo a causa del ritorno falso che si verificano.

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

stopPropagation() è esplicitamente usato per prevenire spumeggiante, anche se ha le stesse restrizioni return false; lo fa - in modo da non impedire che, nel caso di un evento live('click') se ci sono gestori di clic vincolati tramite bind.

fonte

2011-05-03 17:46:09 justkt

+0

Non penso che tu risponda alla mia domanda. U solo cito la documentazione solo nessuno che non conosco. Per ogni scenerio, includo jsfiddle per dimostrare la mia domanda. Si prega di fare riferimento a loro. –

+0

@Harry - Ho modificato la mia risposta per indirizzare ogni esempio di jsfiddle. – justkt

+0

Grazie mille. La tua risposta su '1' e' 2' mi dà un grande aiuto. Tuttavia, per '3', per non dire che hai torto, ma qui c'è la citazione dal sito di jQuery' Per fermare ulteriori gestori dall'esecuzione dopo un limite usando .live(), il gestore deve restituire false. Chiamare .stopPropagation() non compirà questo. Da sopra, 'Squeegy' fa una risposta e alcuni commenti su' 3', sei d'accordo con la sua risposta per '3', justkt? –

2

  1. Eventi in tempo reale Accadono SEMPRE dopo gli eventi di associazione (ad esempio chiamando click(fn)). Quindi return false non fa nulla perché $("body").click() è già successo. Ciò è dovuto al ribollire. Il clic si verifica su ciascun elemento principale dell'elemento su cui si è fatto clic, attivando ogni evento click. Solo quando raggiunge il documento radice, attiva tutti gli eventi dal vivo.

  2. In questo esempio, si hanno 2 eventi dal vivo. Quindi l'evento salta al documento e jQuery inizia a eseguire eventi dal vivo che trova che corrispondono al tuo clic. Quando ottiene un return false interrompe l'esecuzione di altri eventi dal vivo. E gli eventi dal vivo dichiarati per primi, vengono eseguiti per primi. Quindi ottieni il nuovo paragrafo, ma nient'altro da quando l'avviso è stato aggiunto allo stack di eventi dal vivo DOPO il live click p.

  3. E non smetterà di propagazione per gli eventi legano, ma l'argomento event è in realtà un oggetto evento involucro jQuery, e credo che conosce live. Quindi ha un effetto simile a quello di return false, impedisce al gestore di click del documento di eseguire eventi live aggiuntivi.

fonte

2011-05-03 17:54:12

+0

Grande risposta su '1' e' 2'. Non sono sicuro di aver capito la tua risposta per '3'. Quindi 'event.stopPropagation()' non ha fermato la propagazione, cosa ferma la propagazione, Squeegy? –

+3

Arresta la propagazione laterale, non verticale. '$ ('p'). live ('click', fn)' lega un handler 'click' per documentare.È possibile che si verifichino più eventi dal vivo con un solo clic perché il gestore di clic esegue il ciclo di tutti gli eventi dal vivo registrati e cerca di far corrispondere il selettore fornito all'elemento che ha avviato l'evento. Se c'è una corrispondenza, esegue la tua funzione. 'event.stopPropagation()' dice a jQuery di interrompere il ciclo in anticipo. Quindi non stai fermando il bubbling dell'evento, stai fermando il gestore dei clic di 'document' per trovare eventuali elementi aggiuntivi a' click'. –

+0

Grazie mille. –

Problemi correlati

 Problemi correlati