- Right-click shows our context menu
+
+ Il click sul tasto destro mostra il nostro menù contestuale
```
-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
-Right-click here for the button context menu
+Click sul tasto destro per il menù contestuale del documento
+Clicca qui col tasto destro per il menu contestuale del pulsante
```
-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, interrompiamo il bubbling" e usiamo `event.stopPropagation()`:
```html autorun height=80 no-beautify run
-Right-click for the document menu
-Right-click for the button menu (fixed with event.stopPropagation)
+Click sul tasto destro per il documento
+Click sul tasto destro per il menù del pulsante (sistemato con event.stopPropagation)
```
-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 raccolgono 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 nuovamente.
```html autorun height=80 no-beautify run
-Right-click for the document menu (added a check for event.defaultPrevented)
-Right-click for the button menu
+Click sul tasto destro per il menu del documento (aggiunto un controllo per event.defaultPrevented)
+Click sul tasto destro per il menù del pulsante
```
-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 browser:
-- `mousedown` -- starts the selection (move the mouse to select).
-- `click` 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 `` behave as a link (redirect to another URL or so).
+```warn header="Aderire alla semantica, non farne abuso"
+Tecnicamente, prevenendo le azioni predefinite del browser e aggiungendo JavaScript, possiamo personalizzare il comportamento di qualunque elemento. Per esempio, possiamo fare in modo che un link `` si comporti come un pulsante, e un pulsante `` come un link (redirezione su un altro URL o cose del genere).
-But we should generally keep the semantic meaning of HTML elements. For instance, `` should perform navigation, not a button.
+Generalmente però, dovremmo mantenere il significato semantico degli elementi HTML. Per esempio, ` ` dovrebbe comportare una navigazione, e non essere un pulsante.
-Besides being "just a good thing", that makes your HTML better in terms of accessibility.
+Non è "solamente una cosa buona", ciò rende l'HTML migliore in termini di accessibilità.
-Also if we consider the example with ` `, then please note: a browser allows us to open such links in a new window (by right-clicking them and other means). And people like that. But if we make a button behave as a link using JavaScript and even look like a link using CSS, then ` `-specific browser features still won't work for it.
+Inoltre se consideriamo l'esempio con ` `, 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 ` `, non funzioneranno per il pulsante.
```