From 3494cdb00db5898fedf63f5e714341ce04ca9cda Mon Sep 17 00:00:00 2001 From: pierangelomiceli Date: Sun, 7 Feb 2021 14:31:04 +0100 Subject: [PATCH 01/23] modifiche --- .../04-default-browser-action/article.md | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/2-ui/2-events/04-default-browser-action/article.md b/2-ui/2-events/04-default-browser-action/article.md index ceac160c1..13bd7d0ed 100644 --- a/2-ui/2-events/04-default-browser-action/article.md +++ b/2-ui/2-events/04-default-browser-action/article.md @@ -1,43 +1,43 @@ -# Browser default actions +# Azioni predefinite del browser -Many events automatically lead to certain actions performed by the browser. +Molti eventi vengono ricondotti verso determinate azioni eseguite dal browser. -For instance: +Per esempio: -- A click on a link - initiates navigation to its URL. -- A click on a form submit button - initiates its submission to the server. -- Pressing a mouse button over a text and moving it - selects the text. +- Un click su un link - inizializza la navigazione verso il suo URL. +- Un click su un pulsante di invio di un form - inizializza l'invio dello stesso al server. +- Premendo e spostando il pulsante su un testo - lo seleziona. -If we handle an event in JavaScript, we may not want the corresponding browser action to happen, and want to implement another behavior instead. +Quando gestiamo un evento con JavaScript, potremmo non volere affatto che la corrispondente azione del browser avvenga, ed implementare, invece, un altro comportamento. -## Preventing browser actions +## Prevenire le azioni del browser -There are two ways to tell the browser we don't want it to act: +Ci sono due maniere per comunicare al browser che non vogliamo che esegua alcuna azione: -- The main way is to use the `event` object. There's a method `event.preventDefault()`. -- If the handler is assigned using `on` (not by `addEventListener`), then returning `false` also works the same. +- La maniera principale è quella di usare l'oggetto `event`, all'interno del quale c'è il metodo `event.preventDefault()`. +- Se il gestore viene assegnato tramite `on` (e non tramite `addEventListener`), allora restiruire `false` avrà lo stesso effetto. -In this HTML a click on a link doesn't lead to navigation, browser doesn't do anything: +In questo HTML un click su un link non porta a navigarlo, il browser di fatto non fa nulla: ```html autorun height=60 no-beautify -Click here -or -here +Clicca qui +o +qui ``` -In the next example we'll use this technique to create a JavaScript-powered menu. +Nel prossimo esempio useremo questa tecnicaper creare un menù potenziato via JavaScript. -```warn header="Returning `false` from a handler is an exception" -The value returned by an event handler is usually ignored. +```warn header="Restituire `false` da un gestore è un'eccezione" +Il valore restituito da un gestore evento solitamente viene ignorato. -The only exception is `return false` from a handler assigned using `on`. +L'unica eccezione è il `return false` di un gestore assegnato con l'uso di `on`. -In all other cases, `return` value is ignored. In particular, there's no sense in returning `true`. +In tutti gli altri casi, il valore del `return` viene ignorato. Nello specifico, non ha alcun senso restituire `true`. ``` -### Example: the menu +### Esempio: il menù -Consider a site menu, like this: +Considera un menù di questo tipo: ```html ``` -Here's how it looks with some CSS: +Ecco come appare con un po' di CSS: [iframe height=70 src="menu" link edit] -Menu items are implemented as HTML-links ``, not buttons ` + - ``` -Now, in addition to that context menu we'd like to implement document-wide context menu. +Adesso, in aggiunta a questo menù, ci piacerebbe implementare un menù contestuale sul *documento*. -Upon right click, the closest context menu should show up. +Al click sul tasto destro, dovrebbe comparire il relativo menù contestuale. ```html autorun height=80 no-beautify run -

Right-click here for the document context menu

- +

Click sul tasto destro per il menù contestuale del documento

+ ``` -The problem is that when we click on `elem`, we get two menus: the button-level and (the event bubbles up) the document-level menu. +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. -How to fix it? One of solutions is to think like: "When we handle right-click in the button handler, let's stop its bubbling" and use `event.stopPropagation()`: +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()`: ```html autorun height=80 no-beautify run -

Right-click for the document menu

- +

Click sul tasto destro per il documento

+ ``` -Now the button-level menu works as intended. But the price is high. We forever deny access to information about right-clicks for any outer code, including counters that gather statistics and so on. That's quite unwise. +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. -An alternative solution would be to check in the `document` handler if the default action was prevented? If it is so, then the event was handled, and we don't need to react on it. +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. ```html autorun height=80 no-beautify run -

Right-click for the document menu (added a check for event.defaultPrevented)

- +

Click sul tasto destro per il menu del documento (aggiunto un controllo per event.defaultPrevented)

+ ``` -Now everything also works correctly. If we have nested elements, and each of them has a context menu of its own, that would also work. Just make sure to check for `event.defaultPrevented` in each `contextmenu` handler. +Ora funziona tutto correttamente. Se abbiamo elementi annidati, ed ognuno di essi ha un suo menù contestuale, funzionerà anche questo. Dobbiamo solo assicurarci di controllare `event.defaultPrevented` in ogni gestore di `contextmenu`. ```smart header="event.stopPropagation() and event.preventDefault()" -As we can clearly see, `event.stopPropagation()` and `event.preventDefault()` (also known as `return false`) are two different things. They are not related to each other. +Come possiamo chiaramente notare, `event.stopPropagation()` ed `event.preventDefault()` (conosciuto anche come `return false`) sono due cose diverse. Non sono relazionate tra loro. ``` -```smart header="Nested context menus architecture" -There are also alternative ways to implement nested context menus. One of them is to have a single global object with a handler for `document.oncontextmenu`, and also methods that allow us to store other handlers in it. +```smart header="Architettura dei menù contestuali annidati" +Ci sono pure dei modi alternativi per implementare i menù contestuali annidati. Uno di questi è quello di avere un singolo oggetto globale con un solo gestore per `document.oncontextmenu`, e metodi che ci permettono di gestire altri gestori al suo interno. -The object will catch any right-click, look through stored handlers and run the appropriate one. +L'oggetto catturerà ogni click sul tasto destro, controllando tra i suoi gestori ed eseguire quello appropriato. -But then each piece of code that wants a context menu should know about that object and use its help instead of the own `contextmenu` handler. +Ma in questo caso ogni pezzo di codice che vuole implementare un menù contestuale, dovrebbe conoscere l'esistenza di questo oggetto e del suo supporto, invece di avere il proprio gestore per `contextmenu`. ``` -## Summary +## Riepilogo -There are many default browser actions: +Ci sono tante azioni predefinite del borwser: -- `mousedown` -- starts the selection (move the mouse to select). -- `click` on `` -- checks/unchecks the `input`. -- `submit` -- clicking an `` or hitting `key:Enter` inside a form field causes this event to happen, and the browser submits the form after it. -- `keydown` -- pressing a key may lead to adding a character into a field, or other actions. -- `contextmenu` -- the event happens on a right-click, the action is to show the browser context menu. -- ...there are more... +- `mousedown` -- comincia una selezione (spostare il mouse per continuare a selezionare). +- `click` su `` -- check/uncheck sull'`input`. +- `submit` -- cliccando su `` o premendo su `key:Enter` dentro un campo del form, scatena questo evento, ed il browser invia il form subito dopo. +- `keydown` -- premendo un tasto può portare ad aggiungere un carattere dentro un campo, o altre azioni. +- `contextmenu` -- viene scatenato al click sul tasto destro, e l'azione che ne deriva è quella di mostarre il menù contestuale del browser. +- ...e ce ne sono altri... -All the default actions can be prevented if we want to handle the event exclusively by JavaScript. +Tutte le azione predefinite possono essere prevenute se vogliamo gestire gli eventi esclusivamente tramite JavaScript. -To prevent a default action -- use either `event.preventDefault()` or `return false`. The second method works only for handlers assigned with `on`. +Per prevenire un'azione predefinita -- si possono usare `event.preventDefault()` oppure `return false`. Il secondo metodo è valido solo con gestori assegnati con `on`. -The `passive: true` option of `addEventListener` tells the browser that the action is not going to be prevented. That's useful for some mobile events, like `touchstart` and `touchmove`, to tell the browser that it should not wait for all handlers to finish before scrolling. +L'opzione `passive: true` di `addEventListener` comunica al browser che l'azione non sarà prevenuta. La sua utilità si palesa per eventi su dispositivi mobiles, come ad esempio `touchstart` e `touchmove`, per comunicare al browser che non deve attendere l'esecuzione di tutti i gestori prima di effettuare lo scrolling. -If the default action was prevented, the value of `event.defaultPrevented` becomes `true`, otherwise it's `false`. +Se l'azione predefinita è stata prevenuta, il valore di `event.defaultPrevented` diventa `true`, altrimenti è `false`. -```warn header="Stay semantic, don't abuse" -Technically, by preventing default actions and adding JavaScript we can customize the behavior of any elements. For instance, we can make a link `` work like a button, and a button `