Skip to content

Browser default actions #212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
3494cdb
modifiche
pierangelomiceli Feb 7, 2021
3ee0e9a
modifiche articolo
pierangelomiceli Feb 11, 2021
f51babf
traduzione dei task and solutions
pierangelomiceli Feb 12, 2021
670854c
Update 2-ui/2-events/04-default-browser-action/article.md
pierangelomiceli Feb 13, 2021
67df8e5
Update 2-ui/2-events/04-default-browser-action/article.md
pierangelomiceli Feb 13, 2021
8dc0a1b
Update 2-ui/2-events/04-default-browser-action/article.md
pierangelomiceli Feb 13, 2021
3e47ddb
Update 2-ui/2-events/04-default-browser-action/1-why-return-false-fai…
pierangelomiceli Feb 13, 2021
7915700
Update 2-ui/2-events/04-default-browser-action/2-catch-link-navigatio…
pierangelomiceli Feb 13, 2021
183f704
Update 2-ui/2-events/04-default-browser-action/article.md
pierangelomiceli Feb 13, 2021
c35fad5
Update 2-ui/2-events/04-default-browser-action/article.md
pierangelomiceli Feb 13, 2021
4cc5463
Update 2-ui/2-events/04-default-browser-action/1-why-return-false-fai…
pierangelomiceli Feb 13, 2021
ce7d316
Update 2-ui/2-events/04-default-browser-action/3-image-gallery/task.md
pierangelomiceli Feb 13, 2021
71160a1
Update 2-ui/2-events/04-default-browser-action/article.md
pierangelomiceli Feb 13, 2021
46db46d
Update 2-ui/2-events/04-default-browser-action/article.md
pierangelomiceli Feb 13, 2021
4752a39
Update 2-ui/2-events/04-default-browser-action/article.md
pierangelomiceli Feb 13, 2021
8eefe48
Update 2-ui/2-events/04-default-browser-action/article.md
pierangelomiceli Feb 13, 2021
1d158c6
Update 2-ui/2-events/04-default-browser-action/article.md
pierangelomiceli Feb 13, 2021
350c7b7
Update 2-ui/2-events/04-default-browser-action/article.md
pierangelomiceli Feb 13, 2021
839d4a7
Update 2-ui/2-events/04-default-browser-action/article.md
pierangelomiceli Feb 13, 2021
2b1263c
modifiche suggerite ma corrette
pierangelomiceli Feb 17, 2021
25ba6ef
modifiche
pierangelomiceli Feb 17, 2021
1ba167b
Update 2-ui/2-events/04-default-browser-action/article.md
pierangelomiceli Feb 17, 2021
c524f37
Update 2-ui/2-events/04-default-browser-action/article.md
pierangelomiceli Feb 17, 2021
11e75e6
Update 2-ui/2-events/04-default-browser-action/article.md
pierangelomiceli Feb 17, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
When the browser reads the `on*` attribute like `onclick`, it creates the handler from its content.
Quando il browser legge un attributo `on*` come `onclick`, crea il gestore dal suo contenuto.

For `onclick="handler()"` the function will be:
Nel caso di `onclick="handler()"` la funzione sarà:

```js
function(event) {
handler() // the content of onclick
handler() // il contenuto del click
}
```

Now we can see that the value returned by `handler()` is not used and does not affect the result.
Possiamo osservare che il valore restituito da `handler()` non viene usato e non influenza il risultato.

The fix is simple:
Il fix è semplice:

```html run
<script>
Expand All @@ -23,7 +23,7 @@ The fix is simple:
<a href="https://w3.org" onclick="*!*return handler()*/!*">w3.org</a>
```

Also we can use `event.preventDefault()`, like this:
Possiamo anche usare `event.preventDefault()`, come in questo esempio:

```html run
<script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ importance: 3

---

# Why "return false" doesn't work?
# Perché "return false" non funziona?

Why in the code below `return false` doesn't work at all?
Perché nel seguente codice `return false` non funziona per niente?

```html autorun run
<script>
Expand All @@ -14,9 +14,9 @@ Why in the code below `return false` doesn't work at all?
}
</script>

<a href="https://w3.org" onclick="handler()">the browser will go to w3.org</a>
<a href="https://w3.org" onclick="handler()">il browser andrà su w3.org</a>
```

The browser follows the URL on click, but we don't want it.
Il browser andrà all'URL al click, ma non è ciò che vogliamo.

How to fix?
Come si può sistemare?
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
That's a great use of the event delegation pattern.
Questo è un ottimo uso del pattern event delegation.

In real life instead of asking we can send a "logging" request to the server that saves the information about where the visitor left. Or we can load the content and show it right in the page (if allowable).
In applicazioni concrete, invece di chiedere, potremmo inviare una richiesta di "logging" al server, che salvi l'informazione relativa al momento in cui l'utente ha deciso di abbandonare la pagina. Oppure potremmo caricare il contenuto e mostrarlo direttamente in pagina (se permesso).

All we need is to catch the `contents.onclick` and use `confirm` to ask the user. A good idea would be to use `link.getAttribute('href')` instead of `link.href` for the URL. See the solution for details.
Tutto ciò di cui abbiamo bisogno è di catturare i `contents.onclick` ed usare `confirm` per chiedere all'utente. Una buona idea potrebbe essere quella di usare `link.getAttribute('href')` invece di `link.href` per l'URL. Guarda la soluzione per i dettagli.
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ importance: 5

---

# Catch links in the element
# Catturare i links nell'elemento

Make all links inside the element with `id="contents"` ask the user if they really want to leave. And if they don't then don't follow.
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.

Like this:
Come nell'esempio seguente:

[iframe height=100 border=1 src="solution"]

Details:
Dettagli:

- HTML inside the element may be loaded or regenerated dynamically at any time, so we can't find all links and put handlers on them. Use event delegation.
- The content may have nested tags. Inside links too, like `<a href=".."><i>...</i></a>`.
- L'HTML dentro l'elemento potrebbe essere caricato o rigenerato in qualunque istante, quindi non possiamo trovare tutti i links ed inserirvi dei gestori all'interno. Utilizzare invece la event delegation.
- Il contenuto può contenere tags annidati. Anche dentro i links, per esempio potremmo avere `<a href=".."><i>...</i></a>`.
Original file line number Diff line number Diff line change
@@ -1 +1 @@
The solution is to assign the handler to the container and track clicks. If a click is on the `<a>` link, then change `src` of `#largeImg` to the `href` of the thumbnail.
La soluzione è quella di assegnare il gestore al contenitore e tenere traccia dei click. Se un click è sul link `<a>`, allora modificare il `src` di `#largeImg` con l'`href` della thumbnail.
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ importance: 5

---

# Image gallery
# Galleria di immagini

Create an image gallery where the main image changes by the click on a thumbnail.
Creare una galleria di immagini dove l'immagine principale cambi al click su una thumbnail.

Like this:
Come in questo esempio:

[iframe src="solution" height=600]

P.S. Use event delegation.
P.S.: Utilizzate event delegation.
Loading