The term “default action” usually refers to the default behavior or action that occurs when an event is triggered. Sometimes, it becomes necessary to prevent a default action of an event.
Let’s create HTML structure with event and function that needs to prevent the default actions.
<!DOCTYPE html><html lang="en">
<head>
<title>Prevent Default</title>
</head>
<body>
onclick="return handleClick()">
Click me
</a>
<script>
function handleClick() {
alert("Event handled");
}
</script>
</body>
</html>
|
Examples to prevent the default action of an event in JavaScript
1. Using return statement to prevent the default action
In some cases, you can prevent the default action of an event by returning false from the event listener function. This approach only works for certain types of events, such as form submissions and links, and it is generally not recommended as it can cause unexpected behavior in some cases.
Example: This example uses the “return false” statement to prevent default action.
<!DOCTYPE html><html lang="en">
<head>
<title>Prevent Default - Example 1</title>
</head>
<body>
onclick="return handleClick()">Click me</a>
<script>
function handleClick() {
alert("Event handled, but default action prevented");
return false; // Prevents the default action
}
</script>
</body>
</html>
|
Output:
Explanation:
-
In the JavaScript code, the
handleClick()function is defined to display an alert message and then returnfalse, preventing the default action (navigating to “https://www.example.com“).
2. Using stopPropagation() method
The stopPropagation() method can be used to prevent an event from bubbling up to parent elements, which may have their own event listeners that could trigger the default action. Here, we prevent the click event on the child element from bubbling up to the parent element by using the “stopPropagation()” method on the event object.
Example: Here, we are using the “stopPropagation()” method to prevent defaul actions.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Prevent Default - Example 2</title>
</head>
<body>
onclick="handleClick(event)">Click me</a>
<script>
function handleClick(event) {
alert("Event handled, but default action prevented");
event.stopPropagation(); // Prevents the default action
}
</script>
</body>
</html>
|
Output:
Explanation:
-
In the JavaScript code, the
handleClick()function is defined to display an alert message and then callevent.stopPropagation(), which prevents the default action (navigating to “https://www.example.com“).
3. Using preventDefault() method to prevent the default action
This is the most common approach to prevent the default action of an event. The preventDefault() method is available on the event object that is passed to the event listener function, and it can be used to prevent the default action associated with the event. For example, to prevent a link from navigating to a new page when clicked, you can use the following code:
In general, the preventDefault() method is the recommended approach to prevent the default action of an event in JavaScript, as it is widely supported and provides a clear and consistent way to handle events in a web page or application.
Example: Here, we are using the “preventDefault()” method
<!DOCTYPE html><html lang="en">
<head>
<title>Prevent Default - Example 3</title>
</head>
<body>
onclick="handleClick(event)">Click me</a>
<script>
function handleClick(event) {
alert("Event handled, but default action prevented");
event.preventDefault(); // Prevents the default action
}
</script>
</body>
</html>
|
Output:
Explanation:
-
In the JavaScript code, the
handleClick()function is defined to display an alert message and then callevent.preventDefault(), which prevents the default action (navigating to “https://www.example.com“).