Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the use of stopPropagation method in JavaScript
The stopPropagation() methods will be covered in this article along with a useful sample of the code. After that, we'll look at the difference between stopPropagation() and PreventDefault() Methods.
stopPropagation() event method − The parent element cannot access the event using this method. In general, this function is created to prevent multiple calls to the same event from propagating. For example, if a button element is contained within a div tag and both of them have a onclick event, anytime we attempt to activate the event associated with the button element, the event associated with the div element is also activated since this div element is indeed the parent of the button element.
Syntax
event.stopPropagation();
The stopPropagation() method, which will stop the parent from accessing the event, could be used to resolve this issue.
Example 1
<!DOCTYPE html>
<html>
<title>What is the use of stopPropagation method in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
padding: 50px;
background-color: rgba(10, 111, 134, 0.2);
text-align: center;
cursor: pointer;
}
</style>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<h1>Let us understand the stopPropagation() Method</h1>
<p>Test the results by clicking the DIV(1) & DIV(2) as shown below in the color boxes:</p>
<div onclick="myFunction2()">This is my Second DIV(2)
<div onclick="myFunction1(event)">This is my First DIV(1)</div>
</div>
Check to stop propagation event:
<input type="checkbox" id="check">
<p></p>
<p>Because my First DIV(1) is inside Second DIV(2), both DIVs get clicked when you click on First DIV(1).
</p>
<p>You can test it by check and uncheck the stop propagation checkbox, to get the outcome.</p>
<p>You can stop the current event from propagating by using the stopPropagation() method.</p>
<script>
function myFunction1(event) {
alert("My First DIV(1)");
if (document.getElementById("check").checked) {
event.stopPropagation();
}
}
function myFunction2() {
alert("My Second DIV(2)");
}
</script>
</body>
</html>
Once you click outer div "my Second DIV(2)" the confirm box is shown only once as shown below.
Further, if you click the inner div “my First DIV(1)” the confirm box will show twice as shown below.
Next, once you will click ok button this will show outer div “my Second DIV(2)” the confirm box.
Whenever a checkbox has been selected and click the inner div “my First DIV(1)”as seen in the screenshot below. The confirm box appears only once.
Example 2
In this example let us understand how the event.stopPropagation() method has been implemented, which will cause the button element's single function to be executed.
<!DOCTYPE html>
<html>
<title>What is the use of stopPropagation method in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
div {
padding: 50px;
background-color: rgba(63, 65, 45, 0.2);
text-align: center;
}
</style>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<h3>The button element's single function will be executed with stopPropagation() Method
</h3>
<p>Test the result by clicking the button as shown below in the color boxe:</p>
<div class="first" onclick="functionFirst()">
<button type="button" class="btn btn-success btn-lg" onclick="functionSecond()">
Button
</button>
</div>
<p></p>
<script>
function functionSecond() {
event.stopPropagation();
alert("This is my First DIV(1)");
}
function functionFirst() {
alert("This is my Second DIV(2)");
}
</script>
</body>
</html>
preventDefault() Method − It's a method that is found in the event interface. By using this method, the browser is prevented from carrying out the selected element's default action. Only when the event is cancellable will this technique be able to do so. The scroll and wheel events, for instance, are some examples of events that cannot be avoided.
Syntax
preventDefault() Method
Example 3
Let us understand how to stop a link from following the URL in this example so that the browser can't access another page.
<!DOCTYPE html>
<html>
<title>What is the use of stopPropagation method in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Using jquery library -->
<script src="https://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<a id="myLink" href="www.tutorialspoint.com">
Welcome to Tutorialspoint!
</a>
<script>
$("#myLink").click(function() {
event.preventDefault();
alert("This event is prevented, you can't visit the URL.");
});
</script>
</body>
</html>
Click the link and you will see the confirm box saying "This event is prevented, you can't visit the URL."
482 Views
