How to Cancel Events in JavaScript

Mehvish Ashiq Feb 02, 2024
  1. Various Ways to Cancel Events in JavaScript
  2. Use event.preventDefault() to Cancel Events in JavaScript
  3. Use event.stopPropagation() to Cancel Events in JavaScript
  4. Use return false to Cancel Events in JavaScript
How to 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.

  1. Use event.preventDefault() to cancel events in JavaScript.
  2. Use event.stopPropagation() to cancel events in JavaScript.
  3. Use return false to 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:

different ways to cancel events in javascript - preventdefault

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:

different ways to cancel events in javascript - stoppropagation

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:

different ways to cancel events in javascript - returnfalse

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.

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

Related Article - JavaScript Event