How can I click a tag inside of clickable div(ng-click) without clicking the div?

Question

Here is the code:

<div ng-click="grid.appScope.navToPage(row)"class="ui-grid-cell" ui-grid-cell style="cursor: pointer">
   <div class="ui-grid-cell-contents">
     <a ng-href="/mywebpage/2" target="_blank">
       <span class="glyphicon glyphicon-new-window"></span>
     </a>
   </div>'
</div>

I want to figure out some way to be able to click the a tag link without clicking the div with the ng-click. Is there a good way to do this?

How about this: http://stackoverflow.com/questions/5549840/jquery-keep-a-link-clickable-in-clickable-div — ppasler, Dec 28 '16 at 18:27

score 7 · Accepted Answer · edited May 23 '17 at 11:53

You can prevent click propagation using the $event.stopPropagation() which is available on many angular directives such as ng-click. Please have a look at this question AngularJS ng-click stopPropagation

In your case, the anchor tag should look like this:

<a ng-href="/mywebpage/2" ng-click="$event.stopPropagation()" target="_blank">
   <span class="glyphicon glyphicon-new-window"></span>
</a>

score 2 · Answer 2 · answered Dec 28 '16 at 18:29

2

Try this

<a ng-href="/mywebpage/2" target="_blank" ng-click="$event.stopPropagation()"><span class="glyphicon glyphicon-new-window"></span></a>

answered Dec 28 '16 at 18:29

Matuszew

841
5
12

How can I click a tag inside of clickable div(ng-click) without clicking the div?

2 Answers2