diff --git a/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md b/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md index 4d175ca01..6c285c1f5 100644 --- a/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md +++ b/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md @@ -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 -the browser will go to w3.org +browseren vil gå til w3.org ``` -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? diff --git a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.md b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.md index 25079cb8d..b66343476 100644 --- a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.md +++ b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.md @@ -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. diff --git a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.view/index.html b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.view/index.html index 51ac0838b..71973cd6c 100644 --- a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.view/index.html +++ b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.view/index.html @@ -1,40 +1,40 @@ - + + + + + - - - - - - - -
- #contents -

- How about to read Wikipedia or visit W3.org and learn about modern standards? -

-
- - - - + if (target && contents.contains(target)) { + return handleLink(target.getAttribute('href')); + } + }; + + diff --git a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/source.view/index.html b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/source.view/index.html index f0c934391..a9bec4f79 100644 --- a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/source.view/index.html +++ b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/source.view/index.html @@ -1,24 +1,25 @@ - + + + + + - - - - - - - -
- #contents -

- How about to read Wikipedia or visit W3.org and learn about modern standards? -

-
- - + +
+ #contents +

+ Hvad med at læse + Wikipedia + eller besøge + W3.org + for at lære om moderne standarder? +

+
+ diff --git a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/task.md b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/task.md index 6ca456c2c..c30cd5a52 100644 --- a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/task.md +++ b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/task.md @@ -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 `...`. +- 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. `...`. diff --git a/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.md b/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.md index 5ff60b5c0..a4b79e85e 100644 --- a/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.md +++ b/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.md @@ -1 +1 @@ -The solution is to assign the handler to the container and track clicks. If a click is on the `` 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å ``-linken, så ændres `src` for `#largeImg` til `href` for miniaturen. diff --git a/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.view/index.html b/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.view/index.html index 524bc7152..2bd10b23b 100644 --- a/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.view/index.html +++ b/2-ui/2-events/04-default-browser-action/3-image-gallery/solution.view/index.html @@ -1,49 +1,46 @@ - + - - - Gallery - - - - - - -

Large image

- - - - - - + + Galleri + + + + + +

Large image

+ + + + + diff --git a/2-ui/2-events/04-default-browser-action/3-image-gallery/source.view/index.html b/2-ui/2-events/04-default-browser-action/3-image-gallery/source.view/index.html index c488ddcc2..2d8c254d6 100644 --- a/2-ui/2-events/04-default-browser-action/3-image-gallery/source.view/index.html +++ b/2-ui/2-events/04-default-browser-action/3-image-gallery/source.view/index.html @@ -1,34 +1,31 @@ - + + + Galleri + + + - - Gallery - - - + +

Large image

- - -

Large image

- - - - + + diff --git a/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md b/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md index f7571cc80..506b98fbe 100644 --- a/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md +++ b/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md @@ -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. diff --git a/2-ui/2-events/04-default-browser-action/article.md b/2-ui/2-events/04-default-browser-action/article.md index cd815654f..f37c86c6e 100644 --- a/2-ui/2-events/04-default-browser-action/article.md +++ b/2-ui/2-events/04-default-browser-action/article.md @@ -1,43 +1,43 @@ -# Browser default actions +# Browserens standard handlinger -Many events automatically lead to certain actions performed by the browser. +Mange events følger automatisk med bestemte handlinger, som udføres af browseren. -For instance: +For eksempel: -- A click on a link - initiates navigation to its URL. -- A click on a form submit button - initiates its submission to the server. -- Pressing a mouse button over a text and moving it - selects the text. +- Et klik på et link - starter navigation til dens URL. +- Et klik på en form submit-knap - starter indsendelsen af formen til serveren. +- Tryk på en museknap over en tekst og flytter den efterfølgende - vælger teksten. -If we handle an event in JavaScript, we may not want the corresponding browser action to happen, and want to implement another behavior instead. +Hvis vi håndterer et event i JavaScript, vil vi måske ikke ønske den tilsvarende browserhandling skal ske. Det kan være, at vi ønsker at implementere en anden adfærd i stedet. -## Preventing browser actions +## Forhindring af browserhandling -There are two ways to tell the browser we don't want it to act: +Der er to måder at sige til browseren, at vi ikke vil have den til at handle: -- The main way is to use the `event` object. There's a method `event.preventDefault()`. -- If the handler is assigned using `on` (not by `addEventListener`), then returning `false` also works the same. +- Standardmetoden er at bruge `event`-objektet. I den er der metode `event.preventDefault()`. +- Hvis handleren er tildelt ved hjælp af `on` (ikke ved hjælp af `addEventListener`), så virker det samme, hvis man returnerer `false`. -In this HTML, a click on a link doesn't lead to navigation; the browser doesn't do anything: +I dette HTML vil et klik på et link ikke føre til navigation; browseren gør ikke noget: ```html autorun height=60 no-beautify -Click here -or -here +Klik her +eller +her ``` -In the next example we'll use this technique to create a JavaScript-powered menu. +I det næste eksempel vil vi bruge denne teknik til at skabe et menu baseret på JavaScript. -```warn header="Returning `false` from a handler is an exception" -The value returned by an event handler is usually ignored. +```warn header="Returnering af `false` fra en handler er en undtagelse" +Værdien der returneres fra en event handler ignoreres normalt. -The only exception is `return false` from a handler assigned using `on`. +Den eneste undtagelse er `return false` fra en handler tildelt ved hjælp af `on`. -In all other cases, `return` value is ignored. In particular, there's no sense in returning `true`. +I alle andre tilfælde bliver `return`-værdien ignoreret. Der er i hvert fald ingen mening i at returnere `true`. ``` -### Example: the menu +### Eksempel: en menu -Consider a site menu, like this: +Forestil dig en menu på et websted, som denne: ```html ``` -Here's how it looks with some CSS: +Her er hvordan det ser ud med noget CSS: [iframe height=70 src="menu" link edit] -Menu items are implemented as HTML-links ``, not buttons ` + - ``` -Now, in addition to that context menu we'd like to implement document-wide context menu. +Nu, udover den kontekstmenu, vi har, vil vi gerne implementere en kontekstmenu på dokumentniveau. -Upon right click, the closest context menu should show up. +Ved højre museklik skal den nærmeste kontekstmenu vises. ```html autorun height=80 no-beautify run -

Right-click here for the document context menu

- +

Højreklik her for dokumentets kontekstmenu

+ ``` -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. +Problemet er, at når vi klikker på `elem`, får vi to menuer: den ene på knapniveau og (eventet bobler op) den anden på dokumentniveau. -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()`: +Hvordan fikser vi det? En løsning kunne være at tænke: "Når vi håndterer højre museklik i knap-håndteringen, så stopper vi dens bobling" og bruger `event.stopPropagation()`: ```html autorun height=80 no-beautify run -

Right-click for the document menu

- +

Højreklik for dokumentets kontekstmenu

+ ``` -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. +Nu virker knappens kontekstmenu som forventet. Men prisen er høj. Vi forhindrer for altid adgang til information om højre museklik for enhver ydre kode, herunder tællere, der indsamler statistik og så videre. Det er ikke helt klogt. -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. +En alternativ løsning ville være at tjekke i `document`-håndteringen, om standardhandlingen blev forhindret? Hvis det er tilfældet, så blev eventet håndteret, og vi behøver ikke reagere på det. ```html autorun height=80 no-beautify run -

Right-click for the document menu (added a check for event.defaultPrevented)

- +

Højreklik for dokumentets kontekstmenu (tilføjet en kontrol af event.defaultPrevented)

+ ``` -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. +Nu virker alt som forventet. Hvis vi har indlejrede elementer, og hvert enkelt har sin egen kontekstmenu, vil det også virke. Sørg blot for at tjekke for `event.defaultPrevented` i hver `contextmenu`-håndtering. -```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. +```smart header="event.stopPropagation() og event.preventDefault()" +Det er tydeligt, at `event.stopPropagation()` og `event.preventDefault()` (også kendt som `return false`) er to forskellige ting. De er ikke relaterede til hinanden. ``` -```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="Indlejret kontekstmenuers arkitektur" +Der er også alternative måder at implementere indlejrede kontekstmenuer. En af dem er at have et enkelt globalt objekt med en håndtering af `document.oncontextmenu`, og metoder, der tillader os at gemme andre håndteringer i det. -The object will catch any right-click, look through stored handlers and run the appropriate one. +Objektet vil fange alle højreklik, kigge gennem de gemte håndteringer og køre den der passer. -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. +Men så skal al kode der ønsker en kontekstmenu kende til det objekt og bruge dets hjælp i stedet for dens egen `contextmenu`-håndtering. ``` -## Summary +## Opsummering -There are many default browser actions: +Der er mange standard browser-handlinger: -- `mousedown` -- starts the selection (move the mouse to select). -- `click` on `` -- checks/unchecks the `input`. -- `submit` -- clicking an `` or hitting `key:Enter` inside a form field causes this event to happen, and the browser submits the form after it. -- `keydown` -- pressing a key may lead to adding a character into a field, or other actions. -- `contextmenu` -- the event happens on a right-click, the action is to show the browser context menu. -- ...there are more... +- `mousedown` -- starter valg (flyt musen for at vælge). +- `click` på `` -- markerer/afmarkerer et `input`. +- `submit` -- Klik på `` eller tast `key:Enter` inde i et formularfelt medfører at denne event opstår, og browseren sender formen. +- `keydown` -- tryk på en tast kan medføre tilføjelse af et tegn i et felt, eller andre handlinger. +- `contextmenu` -- denne event opstår ved et højreklik, og handlingen er at vise browserens kontekstmenu. +- ...og der er flere... -All the default actions can be prevented if we want to handle the event exclusively by JavaScript. +Alle de standard handlinger kan forhindres, hvis vi ønsker at håndtere eventen udelukkende med JavaScript. -To prevent a default action -- use either `event.preventDefault()` or `return false`. The second method works only for handlers assigned with `on`. +For at forhindre en standard handling -- brug enten `event.preventDefault()` eller `return false`. Den anden metode virker kun for håndteringer, der er tildelt med `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. +Indstillingen `passive: true` på `addEventListener` fortæller browseren, at handlingen ikke vil blive forhindret. Det er nyttigt for nogle mobile events, som `touchstart` og `touchmove`, for at fortælle browseren, at den ikke skal vente på, at alle håndteringer er færdige, før den begynder at scrolle. -If the default action was prevented, the value of `event.defaultPrevented` becomes `true`, otherwise it's `false`. +Hvis en standard handling blev forhindret, bliver værdien af `event.defaultPrevented` til `true`, ellers er det `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 `