Thread by @swapnakpanda

What is < onclick=" return false;" > in HTML?

⇩

➊ Why is it used?

❑ Events automatically lead to certain actions performed by the browser.

❒ In some cases, we may not want default action to be performed.

❑ "return false" triggers browser to prevent taking default action.

➋ Let's break it down

✛ onclick
It's an HTML attribute.
It's being used to set inline event handlers.

✛ =""
The code written inside "" should be valid JS code.

✛ return false
Returning false from an inline event handler

➌ Inline Event Handlers

❑ HTML Elements provide few attributes which are there to assign event handlers. E.g., "onclick"

❒ The value assigned to this attribute has to be valid JS code kept inside 2 double quotes (" and ")

Example:

⇥ <button onclick="performAction()">

➍ Cancelling Event Propagation

❑ Returning "false" from inline event handlers is a way to ask browser to prevent taking default action.

❒ Example:

Clicking on an <a> loads a new page or, reloads current page. We can stop

⇥ <a href="#" onclick="return false;">Bang!</a>

⚠️ Warning ⚠️

⬒ Setting event handlers using HTML onevent attributes is not recommended.

⬔ They inflate our HTML code and hard to test and debug.

⬓ Keeping JavaScript separate from HTML is a good practice.

➏ Let's summarise

⬔ Inline event handlers can be assigned using HTML onevent attributes. (Not a good practice)

⬕ Returning "false" from inline event handlers is a way to ask browser to prevent taking default action.

With this we come to the end of this 🧵 where we discussed about "inline event handlers and preventing default actions".

If you don't want to miss such tutorial threads on HTML, CSS and, JavaScript, follow {@swapnakpanda}

Till we meet again, stay safe and stay sanitised. 👋