- 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.
```
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy