jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

up

Browse source
This commit is contained in:
Ilya Kantor 2017-03-21 14:41:49 +03:00
parent 4ae129054e
commit ab9ab64bd5
476 changed files with 3370 additions and 532 deletions
Download patch file Download diff file Expand all files Collapse all files

5
2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.md Normal file
View file

@ -0,0 +1,5 @@
That's a great use of the event delegation pattern.
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).
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.

40
2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.view/index.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE HTML>
<html>
<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="http://wikipedia.org">Wikipedia</a> or visit <a href="http://w3.org"><i>W3.org</i></a> and learn about modern standards?
</p>
</fieldset>
<script>
contents.onclick = function(event) {
function handleLink(href) {
let isLeaving = confirm(`Leave for ${href}?`);
if (!isLeaving) return false;
}
let target = event.target.closest('a');
if (target && contents.contains(target)) {
return handleLink(target.getAttribute('href'));
}
};
</script>
</body>
</html>

24
2-ui/2-events/04-default-browser-action/2-catch-link-navigation/source.view/index.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE HTML>
<html>
<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="http://wikipedia.org">Wikipedia</a> or visit <a href="http://w3.org"><i>W3.org</i></a> and learn about modern standards?
</p>
</fieldset>
</body>
</html>

16
2-ui/2-events/04-default-browser-action/2-catch-link-navigation/task.md Normal file
View file

@ -0,0 +1,16 @@
importance: 5
---
# Catch links in the element
Make all links inside the element with `id="contents"` ask the user if he really wants to leave. And if he doesn't then don't follow.
Like this:
[iframe height=100 border=1 src="solution"]
Details:
- 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 the event delegation.
- The content may have nested tags. Inside links too, like `<a href=".."><i>...</i></a>`.