Cancel the link and report that the page stayed.
Acceptance criteria
- 1.#out should show stayed here.
JavaScript Tutorial · JavaScript Events
These 10 tasks go with the JavaScript preventDefault chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “preventDefault stops the browser's normal response to an event.” .
1.Stop a link navigatingexercise · easy · 10 min
Cancel the link and report that the page stayed.
Passes when: #out should show stayed here.
2.Stop a form reloadingexercise · easy · 10 min · practice plan
Cancel the submit and report that it was handled.
Passes when: #out should show handled.
3.Check it was preventedexercise · easy · 10 min · practice plan
Report the value of defaultPrevented after cancelling.
Passes when: #out should show true.
4.Stop propagationexercise · easy · 10 min · practice plan
Stop the click reaching the box and report handled here.
Passes when: #out should show handled here.
5.Filter by target insteadexercise · medium · 10 min · practice plan
Handle only the button, without stopping propagation.
Passes when: #out should show only the button.
6.Fix preventDefault called without bracketsbug fix · easy · 8 min
It is a method and must be called.
Passes when: Clicking should make #out show true.
7.Fix stopPropagation used to cancel an actionbug fix · easy · 8 min · practice plan
Stopping the travel does not stop the browser navigating.
Passes when: Clicking should make #out show true.
8.Fix preventDefault used to stop the bubblebug fix · easy · 8 min · practice plan
The click should not reach the box, which needs stopPropagation.
Passes when: Clicking the button should make #out show handled here.
9.Fix return false used to cancelbug fix · easy · 8 min · practice plan
Returning false does nothing in an addEventListener handler.
Passes when: #out should show handled.
10.Fix the unnecessary stopPropagationbug fix · easy · 8 min · practice plan
Checking the target is enough, and leaves other handlers working.
Passes when: Clicking the button should make #out show only the button.
Between them these tasks cover preventDefault, stopPropagation and defaultPrevented.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.