How to Cancel Events in JavaScript
- Various Ways to Cancel Events in JavaScript
-
Use
event.preventDefault()to Cancel Events in JavaScript -
Use
event.stopPropagation()to Cancel Events in JavaScript -
Use
return falseto Cancel Events in JavaScript
This tutorial educates about the different ways to cancel events in JavaScript. It also explains how we can prevent bubbling up to the parent element via an example code.
Various Ways to Cancel Events in JavaScript
We’ll learn about the various JavaScript-canceling events, and those methods are listed below.
- Use
event.preventDefault()to cancel events in JavaScript. - Use
event.stopPropagation()to cancel events in JavaScript. - Use
return falseto cancel events in JavaScript.
Let’s learn each of them with an example code.
Use event.preventDefault() to Cancel Events in JavaScript
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>
Cancel Event Using preventDefault() Method
</title>
</head>
<body>
<p>The preventDefault() method prevents the link above from
switching to the desired URL.</p>
<a id="anchor" href="https://www.google.com/">Go to Google.com</a>
</body>
</html>
JavaScript Code:
document.getElementById('anchor').addEventListener('click', function(e) {
e.preventDefault();
});
Output:
The cancelable event is prevented by the preventDefault(); method in the upper example code. Here, the cancelable means the default action which belongs to the event will not occur.
The preventDefault(); is also useful for preventing form submission and a link redirecting to the desired URL.
Remember, not every event needs to be cancelable. We can use cancelable property to check if the event is cancelable or not.
However, the preventDefault(); does not prevent further propagation. We can use the stopPropagation() method, which is given below.
Use event.stopPropagation() to Cancel Events in JavaScript
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>
Cancel Event Using stopPropagation()
</title>
</head>
<body>
<h1>Cancel Event Using stopPropagation() Method</h1>
<p>Click DIV 1:</p>
<div onclick="funcDiv2()">DIV 2
<div onclick="funcDiv1(event)">DIV 1</div>
</div>
Check to Stop Propagation:
<input type="checkbox" id="check">
</body>
</html>
CSS Code:
div {
padding: 30px;
background-color: rgba(25, 0, 0, 0.2);
text-align: center;
cursor: pointer;
}
JavaScript Code:
function funcDiv1(e) {
alert('You Clicked DIV 1');
if (document.getElementById('check').checked) {
e.stopPropagation();
}
}
function funcDiv2() {
alert('You Clicked DIV 2');
}
Output:
In this example, DIV 1 resides inside DIV 2. This is why both DIVs are clicked if we click the DIV 1 without checking the checkbox.
To avoid this problem, we can use the stopPropagation() method to prevent the propagation (capturing down to the child element or bubbling up to the parent element) of the same event from being executed or called.
Use return false to Cancel Events in JavaScript
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>
Cancel Event Using return false Method
</title>
</head>
<body>
<a href="#" onclick="returnFalseFunc();">Go to Google</a>
</body>
</html>
JavaScript Code:
function returnFalseFunc() {
console.log('It returns false without redirecting to the desired location');
return false;
location.href = 'http://www.google.com/';
}
Output:
Here, we use return false to stop the function’s execution process completely. We use return false where we want the function to stop its execution in strict mode and not process it anymore.
