OK torneremo alla prossima funzione che voglio affrontare è il pulsante X qui.
Quindi, quando clicchiamo su questa X, in realtà dovrebbe rimuovere l'intero Per farlo non solo in grigio, ma
in realtà dovrebbe dissolversi ed eliminarlo.
Così sembra nella versione finale.
Non abbiamo la stessa icona per fare clic sugli stessi colori o l'animazione, ma la funzionalità quando
faccio clic su qualcosa dovrebbe essere la stessa.
Quindi diciamo che ho finito con i piatti.
Si attenua e poi scompare.
E non è più qui è completamente sparito.
OK.
La prima cosa che vogliamo fare è ascoltare un clic su uno di questi ex.
E nella nostra epoca, Tim, ricorderò che abbiamo fatto ognuno uno spanna in modo che possiamo farlo facilmente.
Altrimenti se abbiamo appena avuto una X come parte della menzogna non c'è modo di determinare se il nostro clic è sulla
X o se è sul resto della strada.
Quindi siamo stati lì e ora andremo su una javascript e aggiungiamo un altro commento.
Fai clic su X per eliminare per farlo inizieremo con l'evento click.
Quindi il simbolo del dollaro.
Seleziona tutto spand E farai di nuovo clic e quindi avremo bisogno di una funzione di callback e
al posto della nostra callback faremo semplicemente un altro click su una span proprio così e torneremo all'aggiornamento facendo clic sulla bugia non
succede nulla.
Non appena facciamo clic sullo span, riceviamo un avviso che dice che hai fatto clic su questo intervallo.
C'è un piccolo problema che potresti non aver notato ancora quando clicco sullo span e
poi clic sulla X. Ricevo l'avviso che mi aspetto di ottenere ma presta anche molta attenzione quando ho chiuso l'avviso.
Abbiamo anche gli stili che arrivano dall'evento click.
Quindi, quello che ci dice è che l'evento spam sta sparando e poi anche l'evento ly click
sta sparando.
E questo ha senso perché le nostre spanne sono all'interno degli alleati.
Quindi quando clicchiamo su un intervallo quando clicco su questo intervallo, ad esempio nel mezzo, controlliamolo,
clicco su questo intervallo, ma questo è spagnolo anche all'interno dell'alleato.
Quindi da un'altra prospettiva sto cliccando sulla bugia.
facendo clic sul pozzo perché tutti questi sono al posto di un UL o sul contenitore ID
div o sul corpo o sull'elemento del team in cui si fa clic su uno span che conosci cinque o sei diversi strati.
Ma da un'altra prospettiva sto
Quindi quando aggiungiamo l'ascoltatore dell'evento allo span o all'alleato o se abbiamo un listener di eventi e tutti
quelli che ti mostrerò in questo momento.
Quindi aggiungiamo un altro listener di eventi qui e questo sarà sul testamento e ci limiteremo a fare
clic su UIL e ne faremo uno in più.
E questo sarà sul contenitore ID divx e questo dirà cliccare sul contenitore div e
in realtà lo farà anche sul corpo.
E questo dirà cliccare sul corpo.
OK.
Quindi facciamo clic sulla campata che è invece di un alleato anziché di un UL invece
del contenitore all'interno del corpo.
Ora prestiamo attenzione quando ci aggiorniamo all'ordine in cui le cose sparano.
Quindi, prima clicco sull'intervallo e mi dice che ho fatto clic sull'intervallo e quindi non so se l'hai notato, ma il
fuoco dell'evento click funziona bene. Ecco come abbiamo ottenuto gli stili lì.
E poi il ben cliccato evento poi il contenitore div e infine il corpo infine.
Quindi questo esempio illustra un fenomeno chiamato bubbling di eventi.
Quello che succede è che questo evento inizialmente viene attivato nello span e da dove proviene.
Ma poi bolle in due elementi genitore.
Quindi bolle nella menzogna e attiverà qualsiasi evento di clic simile e poi da lì bolle fino alla
lattina al pozzo che attiverà qualsiasi evento di click bene e così via fino a quando non colpisce
l'elemento HTL dove si ferma per impedire che menzogna.
Fare clic su gestore dall'attivazione quando si fa clic sull'estensione che si trova all'interno della Y.
Quello che possiamo fare è in realtà dire all'evento all'interno dello span di non fare più bolle.
Solo per fermarsi e non attivare altri eventi sull'elemento padre.
Quindi te lo mostrerò qui.
Tutto quello che dobbiamo fare al posto di questo listener veloce span aggiungiamo nell'oggetto evento.
E ancora questo può essere chiamato E evento T.
Qualsiasi nome che si desidera più comune è evento o e.
E poi quello che faremo è aggiungere un metodo chiamato propagazione dell'evento stop.
E questo è un metodo di codifica J che bloccherà l'evento.
Quindi sparerà sullo span ma non continuerà sull'ascoltatore simile o su nessuno di questi che abbiamo
per quella materia.
Quindi, se salviamo e aggiorniamo.
E ora clicco su un intervallo, ma continuo a fare clic sul mio span e poi si ferma.
Non riceviamo nessuno di quegli altri ascoltatori che abbiamo impostato attivando un altro che abbiamo impostato correttamente
il listener di span.
Riempiamolo con il codice corretto.
Quello che dovevamo fare è quando clicchiamo su uno span tornerò al browser quando clicchiamo su uno
di questi.
Vogliamo rimuovere questa bugia così la bugia che la contiene può rinfrescarsi.
Clicco su questo intervallo per rimuovere questa bugia e per farlo possiamo iniziare dallo span usando il simbolo
del dollaro e se facciamo solo dollari su questo remove o fade out, inizieremo con remove.
E torniamo indietro
Tutto ciò che accade è che la durata va via.
In questo momento stiamo rimuovendo l'intervallo.
Abbiamo bisogno di rimuovere l'elemento che racchiude e Shakeri ci offre un modo veramente bello e facile per farlo.
Tutto ciò che dobbiamo fare è scrivere rimuovi questi genitori e questo ci darà effettivamente l'elemento genitore come
elemento di query.
Quindi questo è un intervallo che abbiamo cliccato sul genitore ci dà la bugia rimuove l'intero alleato.
Così ora, se aggiorno, puoi vederlo scomparire e rinfrescare di nuovo.
Ma se clicco al volo, controlla solo l'ultimo miglioramento che potremmo fare piuttosto
che rimuoverlo immediatamente.
È sbiadito.
Quindi faremo un punto in dissolvenza e ricominciamo il refresh, clicchiamo e scompare.
Ma ricordati che montarlo non lo rimuove.
se ispezioniamo invece di voi, abbiamo ancora tre cose da fare, solo due di loro non ne mostrano nessuna.
E 'ancora qui
E non vogliamo che ciò accada.
Immagina di averne migliaia da perdere che avevamo cancellato.
Bene, non vogliamo rallentare le cose avendo migliaia di elementi nascosti sulla nostra pagina.
Quindi quello che faremo è usare remove ma ricordati che non funziona solo per farlo.
Lo rimuoverà ma non aspetterà che la dissolvenza finisca.
che facciamo clic su di esso inizia a svanire e subito dopo rimuove se vogliamo che la dissolvenza finisca, tutto quello che
dobbiamo fare è usare il callback che possiamo passare alla dissolvenza che verrà eseguita in seguito.
Se vogliamo dimostrare così rapidamente
E diamo una durata, diciamo cinquecento millisecondi per iniziare.
E poi quando è fatto non possiamo semplicemente chiamare rimuovere da solo.
Dobbiamo chiamarlo su un elemento e l'elemento su cui vogliamo chiamarlo è lo stesso che stiamo compilando
in modo da poter usare il simbolo del dollaro.
Questo è importante notare che questo qui non è lo stesso simbolo del dollaro qui.
Quindi passiamo attraverso che è un po 'complicato quando clicchiamo su un segno di dollaro spagnolo.
Questo si riferisce all'elemento che era veloce nello span ma poi lo stiamo facendo genitore.
Quindi ora stiamo lavorando con la bugia che racchiude quell'intervallo e quindi stiamo facendo il fadeout al volo.
Quindi, invece di svanire, ciò si riferisce alla menzogna e non alla durata.
OK, quindi salveremo e torneremo all'aggiornamento.
Ora abbiamo una bella dissolvenza e se ispezioniamo l'UL ci resterà solo una vita.
Quindi svanisce e poi rimuove.
Per riassumere tutto qui.
Il primo problema che abbiamo incontrato è stato il fatto che i nostri eventi, l'evento click dello
span, stava effettivamente sparando l'evento al volo dopo che l'evento era stato attivato.
Quindi, per risolvere il problema, abbiamo usato un evento che interrompe la propagazione, impedendogli di ribollire con altri elementi.
E poi abbiamo usato quel genitore per recuperare l'alleato che sta racchiudendo lo span su cui è stato fatto clic e
poi lo abbiamo sbiadito.
E quando la dissolvenza è finita, rimuoviamo l'intera bugia nel prossimo video che affronteremo
con le nuove funzionalità