back to the lesson

Catch links in the element

importance: 5

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.

Like this:


  • 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>.

Open a sandbox for the task.

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.

Open the solution in a sandbox.