Difference between preventDefault() and stopPropagation() methods

In this post, we will cover the PreventDefault & stopPropagation methods with appropriate code examples for each condition, and then we will see how they differ.

We can utilize the preventDefault() and stopPropagation() functions in jQuery event handler functions.

The preventDefault() stops a given element's default browser behavior. An event's bubbling or propagation up the DOM tree is stopped by the stopPropagation() function.

The preventDefault() methods in JavaScript

Using the javascript JpreventDefault() method, It's a method that may be found in the event interface. By using this technique, the browser is prevented from carrying out the selected element's default action. Only if the event is cancellable will this technique be able to do so. The scroll and mouse events are some examples of events that cannot be avoided.

Syntax

The following syntax shows the javascript prevents the element of the action.

Parameter:

The function accepts no parameter.

Example

The following example shows the prevention element of the action.

<!DOCTYPE html>
<html lang = "en">
<head>
<title> JavaScript's preventDefault() method </title>
<!-- Using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<h3> JavaScript's preventDefault() method </h3>
<input type="checkbox" id="demo1" />
click on the checkbox
<script>
$("#demo1").click(function () {
event.preventDefault();
alert("JavaScript Event is prevented");
});
</script>
</body>
</html>

Output

The following output shows the prevented event using JavaScript.

Output1

Difference between preventDefault() and stopPropagation() methods

Output2

The stopPropagation() methods in JavaScript

We can stop the parent element from getting the event With the JavaScript stopPropagation() event method. This function is designed to stop multiple calls for a single event from propagating.

For instance, if a button element is contained within a div tag and both of them have an onclick event, whenever we attempt to activate the event associated with the button element, the event associated with the div element is also activated because the div element is the parent of the button element.

Syntax

The following syntax shows the javascript stop element of the action.

The stopPropagation() method can resolve this issue by stopping the parent from accessing the event.

Example

The following example shows the stop element of the action.

<!DOCTYPE html>
<html lang = "en">
<head>
<title> JavaScript's stopPropagation() method </title>
<!-- Using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<h3> JavaScript's stopPropagation() method </h3>
<input type="checkbox" id="demo1" />
click on the checkbox
<script>
$("#demo1").click(function () {
event.stopPropagation();
alert("JavaScript Event is stopped");
});
</script>
</body>
</html>

Output

The following output shows the prevented event using javascript.

Output1

Output2

Key differences

Upon activation, each event handler shows an alert box with text indicating which element (div, p, or a) was clicked.

There are two possible scenarios in the hyperlink element's click event handler:

Use eventObj.preventDefault()

In this instance, the usual behavior is stopped, and we are not forwarded to the javatpoint website when the hyperlink element is clicked. But, due to event propagation, we continue to see all three notifications.

Use eventObj.stopPropagation()

In this instance, the default behavior is not stopped when the hyperlink element is clicked. We are forwarded to the javatpoint website because to stopPropagation. We do not see div and p tags information.

Example

The following example shows the difference between the preventDefault() vs. stopPropagation() method. Both links use to get the output value as an alert box. The first link prevents the browser from going to the link, and the second link displays an alert and goes to the link. The first link uses the preventDefault() method, and the second uses the stopPropagation() method.

<!DOCTYPE html>
<html lang = "en">
<head>
<title> difference between preventDefault() vs stopPropagation()  Methods </title>
<!-- Using jquery library -->
<script src =
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<p> difference between preventDefault() vs stopPropagation()  Methods </p>
<div id = "parent_data">
  <a id = "child_data" href="https://www.javatpoint.com" target = "_blank"> JavaTpoint </a>
</div>
<div id = "parent_data1">
  <a id = "child_data1" href="https://www.javatpoint.com" target = "_blank"> JavaTpoint </a>
</div>
<script>
var child_var = document.getElementById("child_data");
// The user cannot leave the website after clicking the link.
child_var.onclick = function(e) { 
  e.preventDefault();
  alert('method prevented a given link from opening to the browser'); 
};
//click the parent node may execute the terminal statement Because of event propagation.
child_var.parentNode.onclick = function(e) { 
  alert(' Clicked on the child element!'); 
};
var child_var1 = document.getElementById("child_data1");
// Click the element will stop propagation but let the default action happen.
child_var1.onclick = function(e) { 
  e.stopPropagation();
  alert('Stop Link! no bubbles but open the link!'); 
};
// This message won't be seen because the child halted propagation!
child_var1.parentNode.onclick = function(e) { 
 alert('we cannot see the required message!'); 
};
</script>
</body>
</html>

Output

The following output shows both events using javascript.

Output1

Output2

Difference between preventDefault() vs stopPropagation() Methods

Javascript event.preventDefault() Method	Javascript event.stopPropagation() Method
Prevent the default function of browsers working on that event.	Prevent further propagation of current events by parent or child elements.
It is a JavaScript method that gives and displays in the Event interface.	It is also a JavaScript method that gives the Event interface.
For example, it prevents the browser from giving or requiring a link.	It cannot intercept the browser's default behavior from the given link.
This method does not require any input parameters	This method also does not require any input arguments for operation.
Chrome, safari, firefox, opera, and other browsers support the method.	Chrome, safari, firefox, opera, and other browsers support the method.
It does not display any value as an output.	It does not display any value as an output.
It works for the DOM version of Level 3 Events	It works for the DOM version of Level 2 Events

Conclusion

The event.preventDefault() method stops an element's default behavior. When present in a form element, it inhibits submission. It is rendered incapable of navigating if used in an anchor element.

When used in a context menu, it stops displaying or showing. Although the occurrence. The stopPropagation() method halts an event's propagation or prevents it from happening during the capturing phases.

Next TopicJavaScript padStart() Method

← prev next →