event.stopPropagation() Method - Javascript jQuery Method and Property

Javascript examples for jQuery Method and Property:event.stopPropagation

  1. HOME
  2. Javascript
  3. jQuery Method and Property
  4. event.stopPropagation

Description

The event.stopPropagation() method stops the event bubbling to parent elements.

Syntax

Parameter Require Description
event Required.The event parameter comes from the event binding function

The following code shows how to Stop the click event from bubbling to parent elements:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("span").click(function(event){
        event.stopPropagation();/*from   ww  w  .j a va 2s . com*/
        console.log("The span element was clicked.");
    });
    $("p").click(function(event){
        console.log("The p element was clicked.");
    });
    $("div").click(function(){
        console.log("The div element was clicked.");
    });
});
</script>
</head>
<body>

<div style="height:100px;width:500px;padding:10px;border:1px solid blue;background-color:red;">
This is a div element.
<p style="background-color:pink">This is a p element, in the div element.
<br><span style="background-color:orange">This is a span element in the p and the div element.</span></p>
</div>

</body>
</html>

Related Tutorials