禁用内部链接上的外部元素的ng-click

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.

我有一个使用ui-router的网站,我有一张桌子,我在单元格上点击了一下,但在单元格内部有一个链接。单击链接时,我需要从单元格中禁用ng-click。

<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

当我单击此链接时,我希望它转到about页面,但不要调用click函数。这是一个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.

这与我的实际站点略有不同,但这具有相同的行为(div而不是表)。我已经尝试添加ng-click =“$ event.preventDefault()”,但这也没有解决它。

Any help is appreciated. Thanks!

任何帮助表示赞赏。谢谢!

2 个解决方案

#1

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

防止事件传播到标签冒泡到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)">

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

#2

You should try $event.stopProgation()

你应该尝试$ 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.

哪个不会将事件传播给父母。

#1