You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/2-events/04-default-browser-action/2-catch-link-navigation/task.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ importance: 5
4
4
5
5
# Catturare i links nell'elemento
6
6
7
-
Fare in modo che tutti i links dentro l'elemento con `id="contents"`chiedanoo all'utente se vuole davvero abbandonare la pagina al click. Se risponde no, allora non deve seguire il link.
7
+
Fare in modo che tutti i links dentro l'elemento con `id="contents"`chiedano all'utente se vuole davvero abbandonare la pagina al click. Se risponde no, allora non deve seguire il link.
Copy file name to clipboardExpand all lines: 2-ui/2-events/04-default-browser-action/article.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -51,7 +51,7 @@ Ecco come appare applicando qualche stile CSS:
51
51
52
52
[iframe height=70 src="menu" link edit]
53
53
54
-
Gli elementi del menù sono implementati come links HTML `<a>`, e non pulsanti `<button>`. Ci sono tante ragioni per fare ciò, per esempio:
54
+
Gli elementi del menù sono implementati come links HTML `<a>`, e non come pulsanti `<button>`. Ci sono tante ragioni per fare ciò, per esempio:
55
55
56
56
- A molte persone piace usare "tasto destro" -- "apri in una nuova finestra". Se usassimo `<button>` oppure `<span>`, questa funzionalità non potrebbe essere usata.
57
57
- I motori di ricerca seguono i link `<a href="...">` nel processo di indicizzazione.
Se omettessimo `return false`, subito dopo l'esecuzione del nostro codice, il browser compirebbe la sua "azione predefinita" -- navigando quindi verso l'URL impostato nell'`href`. E non è ciò che vogliamo, dal momento che stiamo gestendo noi stessi il click.
77
77
78
-
A proposito, qui l'utilizzo dell'event delegation rende il nostro menù molto flessibile. Possiamo aggiungere liste annidate e stilizzare usando i CSS per farle "scendere a mo' di tendina".
78
+
A proposito, qui l'utilizzo dell'event delegation rende il nostro menù molto flessibile. Possiamo aggiungere liste annidate e stilizzarle usando i CSS per farle "scendere a mo' di tendina".
79
79
80
80
````smart header="Eventi a seguire"
81
81
Certi eventi scorrono in una sola direzione. Se preveniamo il primo evento, quello seguente (conseguentemente correlato) non ci sarà.
@@ -152,7 +152,7 @@ Al click sul tasto destro, dovrebbe comparire il relativo menù contestuale.
152
152
153
153
Il problema è che così facendo, cliccando su `elem`, otterremmo due menù: quello del pulsante (l'evento va risalendo per via del bubbling) e quello del documento.
154
154
155
-
Come possiamo evitarlo? Una delle soluzioni è fare questo ragionamento: "Quando gestiamo il click sul tasto destro nel gestore del pulsante, stoppiamo il bubbling" e usiamo `event.stopPropagation()`:
155
+
Come possiamo evitarlo? Una delle soluzioni è fare questo ragionamento: "Quando gestiamo il click sul tasto destro nel gestore del pulsante, interrompiamo il bubbling" e usiamo `event.stopPropagation()`:
156
156
157
157
```html autorun height=80 no-beautify run
158
158
<p>Click sul tasto destro per il documento</p>
@@ -174,9 +174,9 @@ Come possiamo evitarlo? Una delle soluzioni è fare questo ragionamento: "Quando
174
174
</script>
175
175
```
176
176
177
-
A questo punto il menù del pulsante funzionerà come previsto. Ma il prezzo sarà alto, perché a quel punto negheremo per sempre l'accesso alle informazioni relative ai click sul tasto destro, a qualunque altro codice esterno, inclusi contatori che raccologono statistiche e così via. Ed è una cosa poco saggia.
177
+
A questo punto il menù del pulsante funzionerà come previsto. Ma il prezzo sarà alto, perché a quel punto negheremo per sempre l'accesso alle informazioni relative ai click sul tasto destro, a qualunque altro codice esterno, inclusi contatori che raccolgono statistiche e così via. Ed è una cosa poco saggia.
178
178
179
-
Una soluzione alternativa potrebbe essere quella di controllare nel gestore del `document` se l'azione predefinita sia stata prevenuta. Se così fosse, significherebbe che l'evento è stato gestito, e quindi non sarà necessario gestirlo a sua volta.
179
+
Una soluzione alternativa potrebbe essere quella di controllare nel gestore del `document` se l'azione predefinita sia stata prevenuta. Se così fosse, significherebbe che l'evento è stato gestito, e quindi non sarà necessario gestirlo nuovamente.
180
180
181
181
182
182
```html autorun height=80 no-beautify run
@@ -216,14 +216,14 @@ Ma in questo caso ogni pezzo di codice che vuole implementare un menù contestua
216
216
217
217
## Riepilogo
218
218
219
-
Ci sono tante azioni predefinite del borwser:
219
+
Ci sono tante azioni predefinite del browser:
220
220
221
221
-`mousedown` -- comincia una selezione (spostare il mouse per continuare a selezionare).
222
222
-`click` su `<input type="checkbox">` -- check/uncheck sull'`input`.
223
223
-`submit` -- cliccando su `<input type="submit">` o premendo su `key:Enter` dentro un campo del form, scatena questo evento, ed il browser invia il form subito dopo.
224
224
-`keydown` -- premendo un tasto può portare ad aggiungere un carattere dentro un campo, o altre azioni.
225
-
-`contextmenu` -- viene scatenato al click sul tasto destro, e l'azione che ne deriva è quella di mostarre il menù contestuale del browser.
226
-
- ...e ce ne sono altri...
225
+
-`contextmenu` -- viene scatenato al click sul tasto destro, e l'azione che ne deriva è quella di mostrare il menù contestuale del browser.
226
+
- ...e molti altri...
227
227
228
228
Tutte le azione predefinite possono essere prevenute se vogliamo gestire gli eventi esclusivamente tramite JavaScript.
229
229
@@ -238,7 +238,7 @@ Tecnicamente, prevenendo le azioni predefinite del browser e aggiungendo JavaScr
238
238
239
239
Generalmente però, dovremmo mantenere il significato semantico degli elementi HTML. Per esempio, `<a>` dovrebbe comportare una navigazione, e non essere un pulsante.
240
240
241
-
Oltre ad essere una "solo una cosa buona", ciò rende l'HTML migliore in termini di accessibilità.
241
+
Non è "solamente una cosa buona", ciò rende l'HTML migliore in termini di accessibilità.
242
242
243
-
Inoltre se consideriamo l'esempio con `<a>`, notiamo bene che: un browser ci permette di default di aprire questi links in una nuova finestra (cliccando sul tasto destro e con altri mezzi). E alla gente questo piace. Ma se invece creiamo un pulsante, che si comporta come se fosse un link usando JavaScript, e che appaia come se fosse un link con l'ausilio dei CSS, le funzionalità del browser, che specificatamente dedicate agli elementi `<a>`, non funzioneranno per il pulsante.
243
+
Inoltre se consideriamo l'esempio con `<a>`, notiamo bene che: un browser ci permette di default di aprire questi links in una nuova finestra (cliccando sul tasto destro e con altri mezzi). E agli utenti questo piace. Ma se invece creiamo un pulsante, che si comporta come se fosse un link usando JavaScript, e che appaia come se fosse un link con l'ausilio dei CSS, le funzionalità del browser, che specificatamente dedicate agli elementi `<a>`, non funzioneranno per il pulsante.
0 commit comments