Angular 在行上触发 ng-click 但在 href 上不触发

Question

我用 bootstrap 创建了一个页面，我想在用户单击该行时执行一个操作。这很简单，我把 ng-click 放在行的 div 上。

但是，在行元素中我有一个 link，我想避免在用户点击 link 时触发 ng-click（在那个如果它应该打开 link)

的 url

这是一个 picture 的行。基本上，如果用户点击 link 符号以外的任何地方，它应该触发 ng-click，如果它点击 link 符号，它应该打开 url.

这可能吗？

PS：我尝试在除 href 元素之外的每个项目上放置 ng-click，但 href 元素位于其他内容的列内，如果我不放置 ng-click 在列上，如果用户点击该列的空白 space，它不会触发。

<div class="col-sm-8" >
   <a href="{{club.url}}" ><i class="fa fa-link"></i></a> |
   <span class="h5 small">{{club.description}}</span>
</div>

Answer 1

$event.stopPropagation() 在锚标记的 ng-click 上冒泡事件。

标记

<div class="col-sm-8" ng-click="myMethod()">
    <a href="{{club.url}}" ng-click="$event.stopPropagation();"><i class="fa fa-link"></i></a> |
</div>

Answer 2

您必须停止从锚点到具有点击事件处理程序的父级 div 的事件传播。

<div class="col-sm-8" ng-click="onRowClick()">
   <a href="{{club.url}}" ng-click="onLinkClick($event)" ><i class="fa fa-link"></i></a> |
   <span class="h5 small">{{club.description}}</span>
</div>

JS

$scope.onLinkClick = function (e) {
  e.stopPropagation();
}

Answer 3

尝试将 ng-click="$event.stopPropagation();" 添加到您的定位标签

<a href="{{club.url}}" ng-click="$event.stopPropagation();"><i class="fa fa-link"></i></a>

Angular 在行上触发 ng-click 但在 href 上不触发

Angular fire ng-click on row but not on href

html

events

twitter-bootstrap

angularjs

angularjs-ng-click