2

Plaese have a look on Image

I have 2 nested HTML Section, where in first section i am calling a function (lets suppose it is ABC();) and in Second section calling function (suppose it is XYZ();) using onClick(). Second section is inside of first section as show in fig.

On click of section-2, function XYZ(); gets call and function ABC() as well as it lies in its parent section.

My requirement to call only function XYZ() on click of section-2 but not ABC() which is its parents section's function.

for example - 

<div onClick='ABC();'>
    Some more code...
    <span onClick='XYZ()'>Click here</span>
</div>

on click of <span> tag section only XYZ() function should get call not ABC() function.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Shubh Sharma
  • 79
  • 7

1 Answers1

3

You need to prevent click event from bubbling up the DOM tree with $event.stopPropagation method:

<div ng-click='ABC();'>
    Some more code...
    <span ng-click='XYZ(); $event.stopPropagation();'>Click here</span>
</div>
dfsq
  • 191,768
  • 25
  • 236
  • 258