- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to stop the bubbling of an event to parent elements in jQuery?
To stop the bubbling of an event to parent elements, use the stopPropagation() method. You can try to run the following code to learn how to stop the bubbling of an event to parent elements −
Example
<html>
<head>
<title>jQuery stopPropagation() method</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").click(function(event){
alert("This is : " + $(this).text());
event.stopPropagation();
});
});
</script>
<style>
div {
margin:10px;
padding:12px;
border:2px solid #666;
width:160px;
}
</style>
</head>
<body>
<p>Click on any box to see the effect:</p>
<div id = "div1" style = "background-color:blue;">
OUTER BOX
<div id = "div2" style = "background-color:red;">
INNER BOX
</div>
</div>
</body>
</html>
Updated on 14-Feb-2020 11:04:20
- Related Questions & Answers
- How do I prevent jQuery events from bubbling up to parent elements?
- Event bubbling vs event capturing in JavaScript?
- What is Event Bubbling in JavaScript?
- How to check the element type of an event target with jQuery?
- What is event Bubbling and capturing in JavaScript?
- jQuery :parent Selector
- How to override jQuery event handlers?
- How to get attribute of an element when using the 'click' event in jQuery?
- jQuery parent descendant Selector
- How to handle jQuery AJAX success event?
- How to suppress jQuery event handling temporarily?
- How to remove event handlers using jQuery?
- What is an Event Object in jQuery?
- jQuery stop() with Examples
- How to find parent elements by python webdriver?
Advertisements