jQuery events priority when element within an element is clicked

Question

<script>
$(document).ready(function()
  {
  $("a").click(function(){
   alert("Anchor Clicked !")  });

  $("p").click(function(){
   alert("p Clicked !")  });

});
</script>
</head>
<body>
<a href = "#"><p>Click Me ! </p> </a>
</body>
</html>

When i click on the link first alert("p Clicked !") and then alert("Anchor Clicked !") appears.

I want to know this behaviour is observed ?

P.S. : I couldn't come with an appropriate title an edit is welcome

You can use [`event.stopPropagation();`](http://api.jquery.com/event.stopPropagation/) to prevent events bubbling, for example: http://jsfiddle.net/a2Uz3/ — Joe, Oct 07 '13 at 14:30

score 1 · Answer 1 · edited May 23 '17 at 11:57

This is due to Event bubbling

When you use event bubbling

                A
               / \
---------------| |-----------------
| element1     | |    a  tag      |
|   -----------| |-----------     |
|   |element2  | |    p  tag      |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

Read What is event bubbling and capturing?

To prevent Event bubbling

use event.stopPropagation

jsfiddle DEMO

jQuery events priority when element within an element is clicked

1 Answers1