javascript - 在内部链接上禁用来自外部元素的 ng-click

Question

我有一个使用 ui-router 的站点，其中有一个表格，我对单元格进行了 ng-click，但在单元格内有一个链接。单击链接时，我需要从单元格中禁用 ng-click。

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

当我点击这个链接时，我希望它转到关于页面，但不调用点击功能。这是一个 plnkr:http://plnkr.co/edit/kE9CZYcYu1OPA9S0K3Jk?p=preview

这与我的实际站点略有不同，但具有相同的行为(div 而不是表格)。我试过添加 ng-click="$event.preventDefault()" 但这也没有解决问题。

感谢任何帮助。谢谢!

Answer 1

防止事件在 <a> 上传播标签冒泡到div

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

另一种方法是在点击处理程序中检查点击目标

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

JS

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