Visitar URL original
Browser default actions by ockley · Pull Request #304 · javascript-tutorial/da.javascript.info · GitHub
Skip to content

Browser default actions #304

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.

Sign up for GitHub

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
ockley merged 1 commit into from
Sep 25, 2026
Merged

Browser default actions #304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 6 additions & 6 deletions 2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md
View file
Open in desktop
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.
Når en browser læser `on*`-attributten som `onclick`, opretter den en håndtering ud fra dens indhold.

For `onclick="handler()"` the function will be:
For `onclick="handler()"` vil funktionen være:

```js
function(event) {
handler() // the content of onclick
handler() // indholdet af onclick
}
```

Now we can see that the value returned by `handler()` is not used and does not affect the result.
Nu kan vi se, at værdien returneret af `handler()` ikke bruges og ikke påvirker resultatet.

The fix is simple:
Løsningen er enkel:

```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:
Vi kan også bruge `event.preventDefault()`, som dette:

```html run
<script>
Expand Down
10 changes: 5 additions & 5 deletions 2-ui/2-events/04-default-browser-action/1-why-return-false-fails/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ importance: 3

---

# Why "return false" doesn't work?
# Hvorfor virker "return false" ikke?

Why in the code below `return false` doesn't work at all?
Se på koden nedenfor. Hvorfor virker `return false` ikke?

```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()">browseren vil gå til w3.org</a>
```

The browser follows the URL on click, but we don't want it.
Browseren følger URL'en ved klik, men det er ikke det, vi vil have.

How to fix?
Hvordan løser man det?
6 changes: 3 additions & 3 deletions 2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
That's a great use of the event delegation pattern.
Det er en god brug af event delegation-mønsteret.

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).
I virkeligheden kan vi i stedet for at spørge brugeren også sende en "logning" til en server, som gemmer informationen om hvor brugeren forlod vores site. Eller vi kan indlæse indholdet og vise det lige i siden (hvis tilladt).

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.
Alt hvad vi har brug for, er at fange `contents.onclick` og bruge `confirm` til at spørge brugeren. En god idé ville være at bruge `link.getAttribute('href')` i stedet for `link.href` til URL'en. Se løsningen for detaljer.
68 changes: 34 additions & 34 deletions 2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
<!DOCTYPE HTML>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style>
#contents {
padding: 5px;
border: 1px green solid;
}
</style>
</head>

<head>
<meta charset="utf-8">
<style>
#contents {
padding: 5px;
border: 1px green solid;
}
</style>
</head>

<body>

<fieldset id="contents">
<legend>#contents</legend>
<p>
How about to read <a href="https://wikipedia.org">Wikipedia</a> or visit <a href="https://w3.org"><i>W3.org</i></a> and learn about modern standards?
</p>
</fieldset>

<script>
contents.onclick = function(event) {
<body>
<fieldset id="contents">
<legend>#contents</legend>
<p>
Hvad med at læse
<a href="https://wikipedia.org">Wikipedia</a>
eller besøge
<a href="https://w3.org"><i>W3.org</i></a>
for at lære om moderne standarder?
</p>
</fieldset>

function handleLink(href) {
let isLeaving = confirm(`Leave for ${href}?`);
if (!isLeaving) return false;
}
<script>
contents.onclick = function (event) {
function handleLink(href) {
let isLeaving = confirm(`Forlad siden for ${href}?`);
if (!isLeaving) return false;
}

let target = event.target.closest('a');
let target = event.target.closest('a');

if (target && contents.contains(target)) {
return handleLink(target.getAttribute('href'));
}
};
</script>

</body>
if (target && contents.contains(target)) {
return handleLink(target.getAttribute('href'));
}
};
</script>
</body>
</html>
43 changes: 22 additions & 21 deletions 2-ui/2-events/04-default-browser-action/2-catch-link-navigation/source.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#contents {
padding: 5px;
border: 1px green solid;
}
</style>
</head>

<head>
<meta charset="utf-8">
<style>
#contents {
padding: 5px;
border: 1px green solid;
}
</style>
</head>

<body>

<fieldset id="contents">
<legend>#contents</legend>
<p>
How about to read <a href="https://wikipedia.org">Wikipedia</a> or visit <a href="https://w3.org"><i>W3.org</i></a> and learn about modern standards?
</p>
</fieldset>

</body>
<body>
<fieldset id="contents">
<legend>#contents</legend>
<p>
Hvad med at læse
<a href="https://wikipedia.org">Wikipedia</a>
eller besøge
<a href="https://w3.org"><i>W3.org</i></a>
for at lære om moderne standarder?
</p>
</fieldset>
</body>
</html>
12 changes: 6 additions & 6 deletions 2-ui/2-events/04-default-browser-action/2-catch-link-navigation/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ importance: 5

---

# Catch links in the element
# Fang links i elementet

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.
Sørg for, at alle links i elementet med `id="contents"` spørger brugeren, om de virkelig vil forlade siden. Og hvis de ikke vil, så følg ikke linkets url.

Like this:
Sådan her:

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

Details:
Detaljer:

- 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>`.
- HTML-indholdet i elementet kan være indlæst eller blive genereret dynamisk, så vi kan ikke bare finde alle links og putte håndteringer på dem. Brug event delegation.
- Indholdet kan have indlejrede tags. Også inde i links, som f.eks. `<a href=".."><i>...</i></a>`.
2 changes: 1 addition & 1 deletion 2-ui/2-events/04-default-browser-action/3-image-gallery/solution.md
View file
Open in desktop
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.
Løsningnen er at tildele håndteringen til containeren og spore klik. Hvis et klik er på `<a>`-linken, så ændres `src` for `#largeImg` til `href` for miniaturen.
91 changes: 44 additions & 47 deletions 2-ui/2-events/04-default-browser-action/3-image-gallery/solution.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,46 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>

<head>
<title>Gallery</title>
<link rel="stylesheet" href="gallery.css">
<meta charset="utf-8">
</head>

<body>

<p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p>

<ul id="thumbs">
<!-- the browser shows a small built-in tooltip on hover with the text from "title" attribute -->
<li>
<a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-thumb.jpg"></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-thumb.jpg"></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-thumb.jpg"></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://en.js.cx/gallery/img5-thumb.jpg"></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://en.js.cx/gallery/img6-thumb.jpg"></a>
</li>
</ul>

<script>
thumbs.onclick = function(event) {
let thumbnail = event.target.closest('a');

if (!thumbnail) return;
showThumbnail(thumbnail.href, thumbnail.title);
event.preventDefault();
}

function showThumbnail(href, title) {
largeImg.src = href;
largeImg.alt = title;
}
</script>

</body>
<head>
<title>Galleri</title>
<link rel="stylesheet" href="gallery.css" />
<meta charset="utf-8" />
</head>

<body>
<p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image" /></p>

<ul id="thumbs">
<!-- browseren viser en lille indbygget tooltip ved hover med teksten fra "title" attributten -->
<li>
<a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-thumb.jpg" /></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-thumb.jpg" /></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-thumb.jpg" /></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://en.js.cx/gallery/img5-thumb.jpg" /></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://en.js.cx/gallery/img6-thumb.jpg" /></a>
</li>
</ul>

<script>
thumbs.onclick = function (event) {
let thumbnail = event.target.closest('a');

if (!thumbnail) return;
showThumbnail(thumbnail.href, thumbnail.title);
event.preventDefault();
};

function showThumbnail(href, title) {
largeImg.src = href;
largeImg.alt = title;
}
</script>
</body>
</html>
57 changes: 27 additions & 30 deletions 2-ui/2-events/04-default-browser-action/3-image-gallery/source.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,31 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<title>Galleri</title>
<link rel="stylesheet" href="gallery.css" />
<meta charset="utf-8" />
</head>

<head>
<title>Gallery</title>
<link rel="stylesheet" href="gallery.css">
<meta charset="utf-8">
</head>
<body>
<p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image" /></p>

<body>

<p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p>

<ul id="thumbs">
<!-- the browser shows a small built-in tooltip on hover with the text from "title" attribute -->
<li>
<a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-thumb.jpg"></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-thumb.jpg"></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-thumb.jpg"></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://en.js.cx/gallery/img5-thumb.jpg"></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://en.js.cx/gallery/img6-thumb.jpg"></a>
</li>
</ul>

</body>
<ul id="thumbs">
<!-- browseren viser en lille indbygget tooltip ved hover med teksten fra "title" attributten -->
<li>
<a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-thumb.jpg" /></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-thumb.jpg" /></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-thumb.jpg" /></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://en.js.cx/gallery/img5-thumb.jpg" /></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://en.js.cx/gallery/img6-thumb.jpg" /></a>
</li>
</ul>
</body>
</html>
8 changes: 4 additions & 4 deletions 2-ui/2-events/04-default-browser-action/3-image-gallery/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ importance: 5

---

# Image gallery
# Billedgalleri

Create an image gallery where the main image changes by the click on a thumbnail.
Opret et billedgalleri, hvor hovedbilledet ændres ved klik på en miniature.

Like this:
Sådan her:

[iframe src="solution" height=600]

P.S. Use event delegation.
P.S. Brug event delegation.
Loading