11# Browser default actions
22
3- Many events automatically lead to browser actions.
3+ Many events automatically lead to certain actions performed by the browser .
44
55For instance:
66
7- - A click on a link -- initiates going to its URL.
8- - A click on submit button inside a form - - initiates its submission to the server.
9- - Pressing a mouse button over a text and moving it -- selects the text.
7+ - A click on a link - initiates navigation to its URL.
8+ - A click on a form submit button - initiates its submission to the server.
9+ - Pressing a mouse button over a text and moving it - selects the text.
1010
11- If we handle an event in JavaScript, often we don't want browser actions. Fortunately, it can be prevented .
11+ If we handle an event in JavaScript, we may not want the corresponding browser action to happen, to implement another behavior instead .
1212
1313## Preventing browser actions
1414
1515There are two ways to tell the browser we don't want it to act:
1616
1717- The main way is to use the ` event ` object. There's a method ` event.preventDefault() ` .
18- - If the handler is assigned using ` on<event> ` (not by ` addEventListener ` ), then we can also return ` false ` from it .
18+ - If the handler is assigned using ` on<event> ` (not by ` addEventListener ` ), then returning ` false ` also works the same .
1919
20- In the example below a click to links doesn't lead to URL change :
20+ In this HTML a click on a link doesn't lead to navigation, browser doesn't do anything :
2121
2222``` html autorun height=60 no-beautify
2323<a href =" /" onclick =" return false" >Click here</a >
2424or
2525<a href =" /" onclick =" event.preventDefault()" >here</a >
2626```
2727
28- ```warn header="Not necessary to return ` true ` "
28+ In the next example we'll use this technique to create a JavaScript-powered menu.
29+
30+ ```warn header="Returning ` false ` from a handler is an exception"
2931The value returned by an event handler is usually ignored.
3032
31- The only exception -- is ` return false ` from a handler assigned using ` on<event> ` .
33+ The only exception is ` return false ` from a handler assigned using ` on<event> ` .
3234
33- In all other cases, ` return ` is not needed and it 's not processed anyhow .
35+ In all other cases, ` return ` value is ignored. In particular, there 's no sense in returning ` true ` .
3436```
3537
3638### Example: the menu
@@ -49,7 +51,7 @@ Here's how it looks with some CSS:
4951
5052[ iframe height=70 src="menu" link edit]
5153
52- Menu items are links ` <a> ` , not buttons. There are several benefits , for instance:
54+ Menu items are implemented as HTML- links ` <a> ` , not buttons ` <button> ` . There are several reasons to do so , for instance:
5355
5456- Many people like to use "right click" -- "open in a new window". If we use ` <button> ` or ` <span> ` , that doesn't work.
5557- Search engines follow ` <a href="..."> ` links while indexing.
0 commit comments