1
00:00:00,380 --> 00:00:05,190
OK torneremo alla prossima funzione che voglio affrontare è il pulsante X qui.

2
00:00:05,190 --> 00:00:11,730
Quindi, quando clicchiamo su questa X, in realtà dovrebbe rimuovere l'intero Per farlo non solo in grigio, ma

3
00:00:11,730 --> 00:00:14,060
in realtà dovrebbe dissolversi ed eliminarlo.

4
00:00:14,190 --> 00:00:16,530
Così sembra nella versione finale.

5
00:00:16,710 --> 00:00:22,170
Non abbiamo la stessa icona per fare clic sugli stessi colori o l'animazione, ma la funzionalità quando

6
00:00:22,170 --> 00:00:24,890
faccio clic su qualcosa dovrebbe essere la stessa.

7
00:00:24,930 --> 00:00:28,100
Quindi diciamo che ho finito con i piatti.

8
00:00:28,440 --> 00:00:30,400
Si attenua e poi scompare.

9
00:00:30,450 --> 00:00:33,010
E non è più qui è completamente sparito.

10
00:00:33,320 --> 00:00:34,250
OK.

11
00:00:34,590 --> 00:00:39,350
La prima cosa che vogliamo fare è ascoltare un clic su uno di questi ex.

12
00:00:39,660 --> 00:00:45,460
E nella nostra epoca, Tim, ricorderò che abbiamo fatto ognuno uno spanna in modo che possiamo farlo facilmente.

13
00:00:45,690 --> 00:00:51,780
Altrimenti se abbiamo appena avuto una X come parte della menzogna non c'è modo di determinare se il nostro clic è sulla

14
00:00:51,780 --> 00:00:54,140
X o se è sul resto della strada.

15
00:00:54,150 --> 00:01:00,680
Quindi siamo stati lì e ora andremo su una javascript e aggiungiamo un altro commento.

16
00:01:00,960 --> 00:01:08,330
Fai clic su X per eliminare per farlo inizieremo con l'evento click.

17
00:01:08,760 --> 00:01:10,740
Quindi il simbolo del dollaro.

18
00:01:10,770 --> 00:01:20,880
Seleziona tutto spand E farai di nuovo clic e quindi avremo bisogno di una funzione di callback e

19
00:01:20,940 --> 00:01:34,110
al posto della nostra callback faremo semplicemente un altro click su una span proprio così e torneremo all'aggiornamento facendo clic sulla bugia non

20
00:01:34,110 --> 00:01:35,200
succede nulla.

21
00:01:35,340 --> 00:01:39,840
Non appena facciamo clic sullo span, riceviamo un avviso che dice che hai fatto clic su questo intervallo.

22
00:01:39,840 --> 00:01:45,420
C'è un piccolo problema che potresti non aver notato ancora quando clicco sullo span e

23
00:01:45,420 --> 00:01:52,690
poi clic sulla X. Ricevo l'avviso che mi aspetto di ottenere ma presta anche molta attenzione quando ho chiuso l'avviso.

24
00:01:53,190 --> 00:01:57,380
Abbiamo anche gli stili che arrivano dall'evento click.

25
00:01:57,840 --> 00:02:04,680
Quindi, quello che ci dice è che l'evento spam sta sparando e poi anche l'evento ly click

26
00:02:04,680 --> 00:02:05,500
sta sparando.

27
00:02:05,730 --> 00:02:11,480
E questo ha senso perché le nostre spanne sono all'interno degli alleati.

28
00:02:11,730 --> 00:02:17,130
Quindi quando clicchiamo su un intervallo quando clicco su questo intervallo, ad esempio nel mezzo, controlliamolo,

29
00:02:21,990 --> 00:02:25,680
clicco su questo intervallo, ma questo è spagnolo anche all'interno dell'alleato.

30
00:02:25,830 --> 00:02:29,370
Quindi da un'altra prospettiva sto cliccando sulla bugia.

31
00:02:29,620 --> 00:02:36,660
facendo clic sul pozzo perché tutti questi sono al posto di un UL o sul contenitore ID

32
00:02:36,660 --> 00:02:46,320
div o sul corpo o sull'elemento del team in cui si fa clic su uno span che conosci cinque o sei diversi strati.

33
00:02:46,350 --> 00:02:48,640
Ma da un'altra prospettiva sto

34
00:02:48,660 --> 00:02:53,880
Quindi quando aggiungiamo l'ascoltatore dell'evento allo span o all'alleato o se abbiamo un listener di eventi e tutti

35
00:02:53,880 --> 00:02:55,790
quelli che ti mostrerò in questo momento.

36
00:02:55,920 --> 00:03:04,020
Quindi aggiungiamo un altro listener di eventi qui e questo sarà sul testamento e ci limiteremo a fare

37
00:03:04,020 --> 00:03:07,990
clic su UIL e ne faremo uno in più.

38
00:03:08,280 --> 00:03:16,080
E questo sarà sul contenitore ID divx e questo dirà cliccare sul contenitore div e

39
00:03:16,230 --> 00:03:19,560
in realtà lo farà anche sul corpo.

40
00:03:19,560 --> 00:03:22,510
E questo dirà cliccare sul corpo.

41
00:03:22,740 --> 00:03:23,410
OK.

42
00:03:23,430 --> 00:03:28,880
Quindi facciamo clic sulla campata che è invece di un alleato anziché di un UL invece

43
00:03:28,890 --> 00:03:30,510
del contenitore all'interno del corpo.

44
00:03:30,510 --> 00:03:34,530
Ora prestiamo attenzione quando ci aggiorniamo all'ordine in cui le cose sparano.

45
00:03:34,590 --> 00:03:42,570
Quindi, prima clicco sull'intervallo e mi dice che ho fatto clic sull'intervallo e quindi non so se l'hai notato, ma il

46
00:03:42,600 --> 00:03:47,090
fuoco dell'evento click funziona bene. Ecco come abbiamo ottenuto gli stili lì.

47
00:03:47,340 --> 00:03:53,060
E poi il ben cliccato evento poi il contenitore div e infine il corpo infine.

48
00:03:53,340 --> 00:03:56,980
Quindi questo esempio illustra un fenomeno chiamato bubbling di eventi.

49
00:03:57,030 --> 00:04:02,290
Quello che succede è che questo evento inizialmente viene attivato nello span e da dove proviene.

50
00:04:02,400 --> 00:04:05,130
Ma poi bolle in due elementi genitore.

51
00:04:05,130 --> 00:04:11,490
Quindi bolle nella menzogna e attiverà qualsiasi evento di clic simile e poi da lì bolle fino alla

52
00:04:11,490 --> 00:04:17,730
lattina al pozzo che attiverà qualsiasi evento di click bene e così via fino a quando non colpisce

53
00:04:17,880 --> 00:04:20,830
l'elemento HTL dove si ferma per impedire che menzogna.

54
00:04:20,850 --> 00:04:25,840
Fare clic su gestore dall'attivazione quando si fa clic sull'estensione che si trova all'interno della Y.

55
00:04:25,860 --> 00:04:31,250
Quello che possiamo fare è in realtà dire all'evento all'interno dello span di non fare più bolle.

56
00:04:31,440 --> 00:04:36,920
Solo per fermarsi e non attivare altri eventi sull'elemento padre.

57
00:04:37,050 --> 00:04:38,600
Quindi te lo mostrerò qui.

58
00:04:38,960 --> 00:04:44,220
Tutto quello che dobbiamo fare al posto di questo listener veloce span aggiungiamo nell'oggetto evento.

59
00:04:44,220 --> 00:04:48,210
E ancora questo può essere chiamato E evento T.

60
00:04:48,420 --> 00:04:51,720
Qualsiasi nome che si desidera più comune è evento o e.

61
00:04:51,900 --> 00:04:59,110
E poi quello che faremo è aggiungere un metodo chiamato propagazione dell'evento stop.

62
00:04:59,790 --> 00:05:04,050
E questo è un metodo di codifica J che bloccherà l'evento.

63
00:05:04,050 --> 00:05:09,960
Quindi sparerà sullo span ma non continuerà sull'ascoltatore simile o su nessuno di questi che abbiamo

64
00:05:09,960 --> 00:05:10,940
per quella materia.

65
00:05:11,310 --> 00:05:13,620
Quindi, se salviamo e aggiorniamo.

66
00:05:14,090 --> 00:05:20,210
E ora clicco su un intervallo, ma continuo a fare clic sul mio span e poi si ferma.

67
00:05:20,250 --> 00:05:25,740
Non riceviamo nessuno di quegli altri ascoltatori che abbiamo impostato attivando un altro che abbiamo impostato correttamente

68
00:05:25,800 --> 00:05:26,970
il listener di span.

69
00:05:27,060 --> 00:05:29,560
Riempiamolo con il codice corretto.

70
00:05:29,940 --> 00:05:35,490
Quello che dovevamo fare è quando clicchiamo su uno span tornerò al browser quando clicchiamo su uno

71
00:05:35,490 --> 00:05:36,170
di questi.

72
00:05:36,330 --> 00:05:44,460
Vogliamo rimuovere questa bugia così la bugia che la contiene può rinfrescarsi.

73
00:05:44,850 --> 00:05:52,140
Clicco su questo intervallo per rimuovere questa bugia e per farlo possiamo iniziare dallo span usando il simbolo

74
00:05:52,140 --> 00:05:58,810
del dollaro e se facciamo solo dollari su questo remove o fade out, inizieremo con remove.

75
00:05:59,790 --> 00:06:01,780
E torniamo indietro

76
00:06:02,190 --> 00:06:05,220
Tutto ciò che accade è che la durata va via.

77
00:06:05,220 --> 00:06:08,020
In questo momento stiamo rimuovendo l'intervallo.

78
00:06:08,130 --> 00:06:14,000
Abbiamo bisogno di rimuovere l'elemento che racchiude e Shakeri ci offre un modo veramente bello e facile per farlo.

79
00:06:14,040 --> 00:06:22,680
Tutto ciò che dobbiamo fare è scrivere rimuovi questi genitori e questo ci darà effettivamente l'elemento genitore come

80
00:06:22,680 --> 00:06:24,120
elemento di query.

81
00:06:24,120 --> 00:06:32,940
Quindi questo è un intervallo che abbiamo cliccato sul genitore ci dà la bugia rimuove l'intero alleato.

82
00:06:33,120 --> 00:06:39,500
Così ora, se aggiorno, puoi vederlo scomparire e rinfrescare di nuovo.

83
00:06:39,500 --> 00:06:46,110
Ma se clicco al volo, controlla solo l'ultimo miglioramento che potremmo fare piuttosto

84
00:06:46,110 --> 00:06:47,500
che rimuoverlo immediatamente.

85
00:06:47,750 --> 00:06:48,770
È sbiadito.

86
00:06:49,140 --> 00:06:59,510
Quindi faremo un punto in dissolvenza e ricominciamo il refresh, clicchiamo e scompare.

87
00:07:00,090 --> 00:07:03,530
Ma ricordati che montarlo non lo rimuove.

88
00:07:03,570 --> 00:07:09,570
se ispezioniamo invece di voi, abbiamo ancora tre cose da fare, solo due di loro non ne mostrano nessuna.

89
00:07:09,720 --> 00:07:10,810
E 'ancora qui

90
00:07:11,130 --> 00:07:12,660
E non vogliamo che ciò accada.

91
00:07:12,660 --> 00:07:15,470
Immagina di averne migliaia da perdere che avevamo cancellato.

92
00:07:15,720 --> 00:07:20,240
Bene, non vogliamo rallentare le cose avendo migliaia di elementi nascosti sulla nostra pagina.

93
00:07:20,250 --> 00:07:26,820
Quindi quello che faremo è usare remove ma ricordati che non funziona solo per farlo.

94
00:07:26,820 --> 00:07:30,770
Lo rimuoverà ma non aspetterà che la dissolvenza finisca.

95
00:07:30,900 --> 00:07:40,820
che facciamo clic su di esso inizia a svanire e subito dopo rimuove se vogliamo che la dissolvenza finisca, tutto quello che

96
00:07:41,620 --> 00:07:49,170
dobbiamo fare è usare il callback che possiamo passare alla dissolvenza che verrà eseguita in seguito.

97
00:07:49,500 --> 00:07:51,580
Se vogliamo dimostrare così rapidamente

98
00:07:51,690 --> 00:07:56,820
E diamo una durata, diciamo cinquecento millisecondi per iniziare.

99
00:07:57,180 --> 00:08:00,680
E poi quando è fatto non possiamo semplicemente chiamare rimuovere da solo.

100
00:08:00,720 --> 00:08:06,360
Dobbiamo chiamarlo su un elemento e l'elemento su cui vogliamo chiamarlo è lo stesso che stiamo compilando

101
00:08:06,360 --> 00:08:09,320
in modo da poter usare il simbolo del dollaro.

102
00:08:09,420 --> 00:08:18,940
Questo è importante notare che questo qui non è lo stesso simbolo del dollaro qui.

103
00:08:19,470 --> 00:08:24,330
Quindi passiamo attraverso che è un po 'complicato quando clicchiamo su un segno di dollaro spagnolo.

104
00:08:24,330 --> 00:08:30,410
Questo si riferisce all'elemento che era veloce nello span ma poi lo stiamo facendo genitore.

105
00:08:30,600 --> 00:08:37,720
Quindi ora stiamo lavorando con la bugia che racchiude quell'intervallo e quindi stiamo facendo il fadeout al volo.

106
00:08:37,800 --> 00:08:43,080
Quindi, invece di svanire, ciò si riferisce alla menzogna e non alla durata.

107
00:08:43,590 --> 00:08:47,470
OK, quindi salveremo e torneremo all'aggiornamento.

108
00:08:47,730 --> 00:08:54,700
Ora abbiamo una bella dissolvenza e se ispezioniamo l'UL ci resterà solo una vita.

109
00:08:55,110 --> 00:08:57,600
Quindi svanisce e poi rimuove.

110
00:08:57,810 --> 00:08:59,610
Per riassumere tutto qui.

111
00:08:59,610 --> 00:09:05,250
Il primo problema che abbiamo incontrato è stato il fatto che i nostri eventi, l'evento click dello

112
00:09:05,250 --> 00:09:09,610
span, stava effettivamente sparando l'evento al volo dopo che l'evento era stato attivato.

113
00:09:10,110 --> 00:09:15,090
Quindi, per risolvere il problema, abbiamo usato un evento che interrompe la propagazione, impedendogli di ribollire con altri elementi.

114
00:09:15,780 --> 00:09:22,530
E poi abbiamo usato quel genitore per recuperare l'alleato che sta racchiudendo lo span su cui è stato fatto clic e

115
00:09:22,530 --> 00:09:23,750
poi lo abbiamo sbiadito.

116
00:09:23,940 --> 00:09:29,430
E quando la dissolvenza è finita, rimuoviamo l'intera bugia nel prossimo video che affronteremo

117
00:09:29,430 --> 00:09:30,970
con le nuove funzionalità