diff --git a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md index 8d29134ff..91fd5440e 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md +++ b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md @@ -2,17 +2,17 @@ importance: 5 --- -# Selectable list +# Lista selezionabile -Create a list where elements are selectable, like in file-managers. +Creare una lista nella quale gli elementi siano selezionabili, come nei file manager. -- A click on a list element selects only that element (adds the class `.selected`), deselects all others. -- If a click is made with `key:Ctrl` (`key:Cmd` for Mac), then the selection is toggled on the element, but other elements are not modified. +- Un click su una lista seleziona solo quell'elemento (aggiunge la classe `.selected`), e deseleziona tutti gli altri. +- Se un click viene fatto insieme a `key:Ctrl` (`key:Cmd` per Mac), allora la seleziona viene alternata sull'elemento, ma gli altri elementi non vengono modificati. -The demo: +La demo: [iframe border="1" src="solution" height=180] -P.S. For this task we can assume that list items are text-only. No nested tags. +P.S.: Per questo compito possiamo assumere che questi elementi siano composti solamente da testo. Nessun tag annidato. -P.P.S. Prevent the native browser selection of the text on clicks. +P.P.S.: Prevenire la selezione nativa del browser sul testo al click. diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index 4f3be1933..797b66c05 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -1,211 +1,211 @@ -# Mouse events +# Eventi del mouse -In this chapter we'll get into more details about mouse events and their properties. +In questo capitolo andremo un po' più a fondo sugli eventi del mouse e le loro proprietà. -Please note: such events may come not only from "mouse devices", but are also from other devices, such as phones and tablets, where they are emulated for compatibility. +Nota bene: questi eventi potrebbero derivare non solo da "dispositivi mouse", ma anche da dispositivi di altro tipo, come telefoni e tablets, nei quali sono emulati per compatibilità. -## Mouse event types +## Tipi di eventi del mouse -We've already seen some of these events: +Abbiamo visto precedentemente alcuni di questi eventi: `mousedown/mouseup` -: Mouse button is clicked/released over an element. +: Il pulsante del mouse viene premuto/rilasciato su un elemento. `mouseover/mouseout` -: Mouse pointer comes over/out from an element. +: Il puntatore del mouse passa sopra/abbandona un elemento. `mousemove` -: Every mouse move over an element triggers that event. +: Ogni movimento del mouse su un elemento genera questo evento. `click` -: Triggers after `mousedown` and then `mouseup` over the same element if the left mouse button was used. +: Scaturito dopo l'evento `mousedown` e quindi `mouseup` sullo stesso elemento se viene usato il pulsante sinistro del mouse. `dblclick` -: Triggers after two clicks on the same element within a short timeframe. Rarely used nowadays. +: Generato quando avvengono due click sullo stesso elemento in un piccolo intervallo di tempo. Oggigiorno usato raramente. `contextmenu` -: Triggers when the right mouse button is pressed. There are other ways to open a context menu, e.g. using a special keyboard key, it triggers in that case also, so it's not exactly the mouse event. +: Scaturito quando viene premuto il pulsante destro del mouse. Ci sono altri modi per aprire un menù contestuale, per esempio usando un particolare tasto della tastiera, quindi viene generato anche in quest'ultimo caso e non è propriamente un evento del mouse. -...There are several other events too, we'll cover them later. +...Ci sono tanti altri eventi, che affronteremo successivamente. -## Events order +## Ordine degli eventi -As you can see from the list above, a user action may trigger multiple events. +Come possiamo notare dalla lista appena descritta, un'azione dell'utente può generare eventi multipli. -For instance, a left-button click first triggers `mousedown`, when the button is pressed, then `mouseup` and `click` when it's released. +Per esempio, un click sul pulsante sinistro del mouse genera `mousedown`, quando il pulsante viene premuto, quindi `mouseup` e `click` quando viene rilasciato. -In cases when a single action initiates multiple events, their order is fixed. That is, the handlers are called in the order `mousedown` -> `mouseup` -> `click`. +Quando un'azione singola inizia eventi multipli, il loro ordine è fisso. Ossia, i gestori vengono chiamati nell'ordine `mousedown` -> `mouseup` -> `click`. ```online -Click the button below and you'll see the events. Try double-click too. +Premi il seguente pulsante e vedrai gli eventi. prova anche il doppio click. -On the teststand below all mouse events are logged, and if there is more than a 1 second delay between them they are separated by a horizontal ruler. +Nel banco di prova in basso, vengono elencati tutti gli eventi del mouse, e se passa più di un secondo tra uno e l'altro vengono separati da una riga orizzontale. -Also we can see the `button` property that allows to detect the mouse button, it's explained below. +Possiamo inoltre notare la proprietà `button` che permette di rilevare il pulsante del mouse, viene spiegato successivamente. -
+ ``` -## Mouse button +## Pulsante del mouse -Click-related events always have the `button` property, which allows to get the exact mouse button. +Gli eventi relativi al click contengono sempre la proprietà `button`, che permette di conoscere esattamente quale pulsante del mouse viene premuto. -We usually don't use it for `click` and `contextmenu` events, because the former happens only on left-click, and the latter -- only on right-click. +Solitamente non lo usiamo per gli eventi `click` e `contextmenu`, perché il primo avviene solo per il click sul pulsante sinistro, ed il secondo -- solo per quelli sul tasto destro. -From the other hand, `mousedown` and `mouseup` handlers may need `event.button`, because these events trigger on any button, so `button` allows to distinguish between "right-mousedown" and "left-mousedown". +D'altra parte, i gestori `mousedown` e `mouseup` potrebbero necessitare di `event.button`, in quanto questi eventi vengono generati su qualunque pulsante, quindi `button` permette di discriminare tra "mousedown destro" e "mousedown sinistro". -The possible values of `event.button` are: +I valori possibili di `event.button` sono: | Button state | `event.button` | |--------------|----------------| -| Left button (primary) | 0 | -| Middle button (auxiliary) | 1 | -| Right button (secondary) | 2 | -| X1 button (back) | 3 | -| X2 button (forward) | 4 | +| Pulsante sinistro (principale) | 0 | +| Pulsante medio (ausiliario) | 1 | +| Pulsante destro (secondario) | 2 | +| Pulsante X1 (indietro) | 3 | +| Pulsante X2 (avanti) | 4 | -Most mouse devices only have the left and right buttons, so possible values are `0` or `2`. Touch devices also generate similar events when one taps on them. +La maggioranza dei mouse hanno solo il tasto destro e sinistro, quindi i valori possibili sono `0` o `2`. Anche i dispositivi touch generano event simili al tocco. -Also there's `event.buttons` property that has all currently pressed buttons as an integer, one bit per button. In practice this property is very rarely used, you can find details at [MDN](mdn:/api/MouseEvent/buttons) if you ever need it. +Inoltre esiste la proprietà `event.buttons` che include tutti i pulsanti attualmente premuti, rappresentati come numero intero, una cifra per pulsante. In pratica questa proprietà viene usata raramente, ma si possono trovare i dettagli su [MDN](mdn:/api/MouseEvent/buttons) in caso di necessità. -```warn header="The outdated `event.which`" -Old code may use `event.which` property that's an old non-standard way of getting a button, with possible values: +```warn header="L'obsoleta `event.which`" +Codice più antiquato potrebbe fare uso della proprietà `event.which` che è un vecchio e non standard modo di ottenere informazioni sul pulsante, con questi possibili valori: -- `event.which == 1` – left button, -- `event.which == 2` – middle button, -- `event.which == 3` – right button. +- `event.which == 1` – pulsante sinistro, +- `event.which == 2` – pulsante centrale, +- `event.which == 3` – pulsante destro. -As of now, `event.which` is deprecated, we shouldn't use it. +Attualmente, `event.which` è deprecato e non dovremmo usarlo. ``` -## Modifiers: shift, alt, ctrl and meta +## Modificatori: shift, alt, ctrl e meta -All mouse events include the information about pressed modifier keys. +Tutti gli eventi del mouse includono informazioni circa i tasti modificatori premuti. -Event properties: +Proprietà dell'evento: - `shiftKey`: `key:Shift` -- `altKey`: `key:Alt` (or `key:Opt` for Mac) +- `altKey`: `key:Alt` (oppure `key:Opt` per Mac) - `ctrlKey`: `key:Ctrl` -- `metaKey`: `key:Cmd` for Mac +- `metaKey`: `key:Cmd` per Mac -They are `true` if the corresponding key was pressed during the event. +Vengono valorizzati a `true` quando il tasto corrispondente viene premuto. -For instance, the button below only works on `key:Alt+Shift`+click: +Per esempio, il seguente pulsante funziona solamente con `key:Alt+Shift`+click: ```html autorun height=60 - + ``` -```warn header="Attention: on Mac it's usually `Cmd` instead of `Ctrl`" -On Windows and Linux there are modifier keys `key:Alt`, `key:Shift` and `key:Ctrl`. On Mac there's one more: `key:Cmd`, corresponding to the property `metaKey`. +```warn header="Attenzione: su Mac solitamente si usa `Cmd` invece di `Ctrl`" +Su Windows e Linux esistono i tasti modificatori `key:Alt`, `key:Shift` e `key:Ctrl`. Su Mac ne esiste uno in più: `key:Cmd`, corrispondente alla proprietà `metaKey`. -In most applications, when Windows/Linux uses `key:Ctrl`, on Mac `key:Cmd` is used. +Nella maggior parte delle applicazioni, quando Windows/Linux usano `key:Ctrl`, su Mac si usa `key:Cmd`. -That is: where a Windows user presses `key:Ctrl+Enter` or `key:Ctrl+A`, a Mac user would press `key:Cmd+Enter` or `key:Cmd+A`, and so on. +Ossia: quando un utente Windows preme `key:Ctrl+Enter` o `key:Ctrl+A`, un utente Mac premerebbe `key:Cmd+Enter` o `key:Cmd+A`, e così via. -So if we want to support combinations like `key:Ctrl`+click, then for Mac it makes sense to use `key:Cmd`+click. That's more comfortable for Mac users. +Ne consegue che se vogliamo dare supporto a combinazioni di tasti come `key:Ctrl`+click, allora per Mac ha senso usare `key:Cmd`+click, che è molto più comodo per utenti Mac. -Even if we'd like to force Mac users to `key:Ctrl`+click -- that's kind of difficult. The problem is: a left-click with `key:Ctrl` is interpreted as a *right-click* on MacOS, and it generates the `contextmenu` event, not `click` like Windows/Linux. +Anche se volessimo forzare gli utenti Mac a usare `key:Ctrl`+click -- si va incontro a una certa tipologia di ostacolo. Il problema è che: un click col tasto destro con un `key:Ctrl` su Mac viene interpretato come un *click sul tasto destro*, e genera l'evento `contextmenu`, non un `click` come su Windows/Linux. -So if we want users of all operating systems to feel comfortable, then together with `ctrlKey` we should check `metaKey`. +Quindi se vogliamo che gli utenti di tutti i sistemi operativi lavorino si sentano a proprio agio, allora insieme a `ctrlKey` dovremmo controllare `metaKey`. -For JS-code it means that we should check `if (event.ctrlKey || event.metaKey)`. +Per il codice JS ciò significa che dovremmo controllare `if (event.ctrlKey || event.metaKey)`. ``` -```warn header="There are also mobile devices" -Keyboard combinations are good as an addition to the workflow. So that if the visitor uses a keyboard -- they work. +```warn header="Esistono anche i dispositivi mobile" +Le combinazioni di tasti vanno bene in aggiunta al flusso di lavoro. Quindi se il visitatore usa una tastiera -- andranno bene. -But if their device doesn't have it -- then there should be a way to live without modifier keys. +Ma in mancanza di questa -- allora dovrebbe esserci una maniera per poter "vivere" senza tasti modificatori. ``` -## Coordinates: clientX/Y, pageX/Y +## Coordinate: clientX/Y, pageX/Y -All mouse events provide coordinates in two flavours: +Tutti gli eventi del mouse forniscono le coordinate in due modi: -1. Window-relative: `clientX` and `clientY`. -2. Document-relative: `pageX` and `pageY`. +1. Relative alla Window: `clientX` e `clientY`. +2. Relative al Document: `pageX` e `pageY`. -We already covered the difference between them in the chapter