javascript - Disable ng-click from outside element on link inside - Stack Overflow

admin管理员组

文章数量:1026989

I have a site using ui-router where I have a table and I have an ng-click on the cells, but have a link inside the cell. I need to disable the ng-click from the cell, when the link is clicked.

<div ng-click="click()" style="background: #d3d3d3">
  <a ui-sref="about">go to about page</a>
</div>

When I click this link, I want it to go to the about page, but not call the click function. Here's a plnkr:

This is a little different than my actual site, but this has the same behavior (div instead of table). I've tried adding ng-click="$event.preventDefault()" but that did not resolve it either.

Any help is appreciated. Thanks!

I have a site using ui-router where I have a table and I have an ng-click on the cells, but have a link inside the cell. I need to disable the ng-click from the cell, when the link is clicked.

<div ng-click="click()" style="background: #d3d3d3">
  <a ui-sref="about">go to about page</a>
</div>

When I click this link, I want it to go to the about page, but not call the click function. Here's a plnkr: http://plnkr.co/edit/kE9CZYcYu1OPA9S0K3Jk?p=preview

This is a little different than my actual site, but this has the same behavior (div instead of table). I've tried adding ng-click="$event.preventDefault()" but that did not resolve it either.

Any help is appreciated. Thanks!

• javascript
• angularjs
• angular-ui-router
• angularjs-ng-click

Share Improve this question Follow asked May 6, 2015 at 19:08 TimothyTimothy 1,16033 gold badges1212 silver badges3333 bronze badges 4

• ng-click="$event.stopPropagation()" on the anchor perhaps so that it does not bubble up to run the click() on its parent. – PSL Commented May 6, 2015 at 19:16
• @PSL that worked. You're awesome! If you put this as an answer, I'll accept it. – Timothy Commented May 6, 2015 at 19:21
• 1 Timothy - @:charlietfl has updated his answer since, which you may accept.. – PSL Commented May 6, 2015 at 19:22
• @Timothy: Rather than adding an unnecessary ng-click event on your link, try to use $event.currentTarget and execute you event handler code. This don't require you to add ng-click on anchor tag. Because you have anchor tag in table column you will end up with lot of event handler for anchor tags. So I think performance wise this would be better with only required event handler on your table cell. – Jagadish Dharanikota Commented May 6, 2015 at 19:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Prevent propagation of event on the <a> tag bubbling to the div

<a ui-sref="about" ng-click="$event.stopPropagation()">go to about page</a>

Another way is to check target of click inside the click handler

<div ng-click="click($event)">

JS

$scope.click = function(e){
   if( e.target.tagName ==='A'){
       return; // skip click event handler
   }
    // rest of click code
}

You should try $event.stopProgation()

<div ng-click="click();" style="background: #d3d3d3">
  <a ui-sref="about" ng-click="$event.stopProgation()">go to about page</a>
</div>

Which will not propagate events to there parents.

I have a site using ui-router where I have a table and I have an ng-click on the cells, but have a link inside the cell. I need to disable the ng-click from the cell, when the link is clicked.

<div ng-click="click()" style="background: #d3d3d3">
  <a ui-sref="about">go to about page</a>
</div>

When I click this link, I want it to go to the about page, but not call the click function. Here's a plnkr:

This is a little different than my actual site, but this has the same behavior (div instead of table). I've tried adding ng-click="$event.preventDefault()" but that did not resolve it either.

Any help is appreciated. Thanks!

I have a site using ui-router where I have a table and I have an ng-click on the cells, but have a link inside the cell. I need to disable the ng-click from the cell, when the link is clicked.

<div ng-click="click()" style="background: #d3d3d3">
  <a ui-sref="about">go to about page</a>
</div>

When I click this link, I want it to go to the about page, but not call the click function. Here's a plnkr: http://plnkr.co/edit/kE9CZYcYu1OPA9S0K3Jk?p=preview

This is a little different than my actual site, but this has the same behavior (div instead of table). I've tried adding ng-click="$event.preventDefault()" but that did not resolve it either.

Any help is appreciated. Thanks!

• javascript
• angularjs
• angular-ui-router
• angularjs-ng-click

Share Improve this question Follow asked May 6, 2015 at 19:08 TimothyTimothy 1,16033 gold badges1212 silver badges3333 bronze badges 4

• ng-click="$event.stopPropagation()" on the anchor perhaps so that it does not bubble up to run the click() on its parent. – PSL Commented May 6, 2015 at 19:16
• @PSL that worked. You're awesome! If you put this as an answer, I'll accept it. – Timothy Commented May 6, 2015 at 19:21
• 1 Timothy - @:charlietfl has updated his answer since, which you may accept.. – PSL Commented May 6, 2015 at 19:22
• @Timothy: Rather than adding an unnecessary ng-click event on your link, try to use $event.currentTarget and execute you event handler code. This don't require you to add ng-click on anchor tag. Because you have anchor tag in table column you will end up with lot of event handler for anchor tags. So I think performance wise this would be better with only required event handler on your table cell. – Jagadish Dharanikota Commented May 6, 2015 at 19:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Prevent propagation of event on the <a> tag bubbling to the div

<a ui-sref="about" ng-click="$event.stopPropagation()">go to about page</a>

Another way is to check target of click inside the click handler

<div ng-click="click($event)">

JS

$scope.click = function(e){
   if( e.target.tagName ==='A'){
       return; // skip click event handler
   }
    // rest of click code
}

You should try $event.stopProgation()

<div ng-click="click();" style="background: #d3d3d3">
  <a ui-sref="about" ng-click="$event.stopProgation()">go to about page</a>
</div>

Which will not propagate events to there parents.

本文标签： javascriptDisable ngclick from outside element on link insideStack Overflow