- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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
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>
- Related Articles
- 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?
- How to override jQuery event handlers?
- How to get attribute of an element when using the 'click' event in jQuery?
- How to remove event handlers using jQuery?
- How to suppress jQuery event handling temporarily?
- How to handle jQuery AJAX success event?
- How to find parent elements by python webdriver?
- How to remove all child nodes from a parent in jQuery?
- jQuery :parent Selector
- What is an Event Object in jQuery?
- How to check if event exists on element in jQuery?

Advertisements