How to Cancel Events in JavaScript?

While updating a web page or the website, there are situations where some included links are no longer needed or become irrelevant. In addition to that, managing the traffic of a particular website effectively. In such cases, canceling the events in JavaScript does wonders in disabling some functionality and handling such case scenarios.

How to Cancel Events in JavaScript?

The following approaches can be utilized to cancel events in JavaScript:

- “preventDefault()” method.
- “Boolean Value” approach.
- “stopPropagation()” method.

Approach 1: Cancel Events in JavaScript Using preventDefault() Method

The “preventDefault()” method cancels the attached event if it is cancel-able. This method can be utilized to detach the attached event from the accessed link thereby preventing the action to be performed.

Syntax

event.preventDefault()

In the given syntax:

- “event” refers to the event to be detached.

Example

Go through the below-given code-snippet:

<h3>The Click event will be cancelled!</h3>
<a id="site" href= "https://www.google.com/">Visit the Google Website</a>
document.getElementById("site").addEventListener("click", function(cancel){
cancel.preventDefault();
});

Follow the below-stated steps:

- Firstly, include the stated heading to be displayed on the Document Object Model(DOM).
- After that, specify the “URL” using the “href” attribute.
- Now, in the JavaScript part of the code, access the specified URL.
- Also, attach a “click” event with the URL with the help of a function using the “addEventListener()” method.
- Finally, the “preventDefault()” method will be applied with the help of the function’s parameter to detach the attached event.

Output

Approach 2: Cancel Events in JavaScript by Returning a Boolean Value

This approach can be implemented by returning the “false” boolean value upon the triggered event.

Example

The following lines of code demonstrate the stated concept:

<center><input type="text" placeholder= "Enter Text" oninput= "cancelEvent()"></center>
function cancelEvent(){
return false;
alert("This statement will not be displayed")
}

In the above code snippet:

- First, within the “<center>” tag, allocate an input text field.
- Also, attach an “oninput” event with the specified “placeholder” value. This will result in invoking the specified function upon inputting the text.
- Now, in the JavaScript part of the code, declare a function named “cancelEvent()”. In its definition, return the boolean value “false” to cancel the included “event”.
- Finally, specify the stated message in the alert box. The returned boolean value will result in avoiding the dialogue box to be displayed.

Output

In the above output, it can be observed that upon the accessed function, the alert dialogue box is not displayed thereby canceling the attached event.

Approach 3: Cancel Events in JavaScript Using stopPropagation() Method

The “stopPropagation()” method prevents the same event from being propagated. This method can be utilized to stop propagating between the two divs upon checking the checkbox.

Syntax

event.stopPropagation()

Example

Observe the following lines of code:

<center><h3>Click on the Website to observe the change:</h3>
<div onclick="element2()">Linuxhint
<div onclick="element1(event)">Website</div>
</div>
<br>
Check to Stop Propagation:
<input type="checkbox" id="check">
</center>

- In the first step, similarly, include the stated heading.
- Now, include two “div” tags with attached “onclick” events with each of them invoking two different functions element2() and element1().
- Also, include a checkbox with the specified id. This checkbox will result in stopping the propagation between two divs.

Now, look at the following JavaScript lines of code:

function element1(e) {
alert("You Clicked Website");
if (document.getElementById("check").checked) {
e.stopPropagation();
}
}
function element2() {
alert("You Clicked Linuxhint");
}

In the above js code:

- Define a function named “element1()”. Here, the parameter “e” refers to the “event” being fired specified in the HTML part of the code.
- In its definition, display the alert dialogue box having the stated message.
- After that, access the created checkbox by its id using the “getElementById()” method. Also, apply the “checked” property to it in order to check the condition of the checked checkbox.
- Then, apply the “stopPropagation()” method referring to the parameter “e”. This will result in stopping the propagation from one function to the other function.
- Similarly, define another function “element2()” to be propagated upon. This function will be functional before propagation only.

Output

Here, observes the behavior upon clicking the div upon checking the checkbox.

We have compiled the approaches to cancel events in JavaScript.

Conclusion

The “preventDefault()” method, the “boolean value” approach, or the “stopPropagation()” method can be utilized to cancel events in JavaScript. The first method can be implemented to detach the attached event resulting in disabling the link. The boolean value approach returns the “false” boolean value upon the triggered event. The stopPropagation() method can be applied to stop propagating between the two divs with the help of an included checkbox. This tutorial explained to cancel events in JavaScript.

How to Cancel Events in JavaScript?