Events AngularJS-多个ng点击-事件冒泡

在以下示例中：

  <li ng-repeat="item in items" ng-click="showItem(item)">
    <h3>{{item.title}}</h3>
    <button ng-click="remove(item)">Remove</button>
  </li>

---

如果传入的

项目

不再存在，则可以更新

showItem

以提前返回：

function remove(item) {
  if (-1 == $scope.items.indexOf(item)) {
    // Item no longer exists, return early
    return;
  }
  // Rest of code here
}

---

这个解决方案对我很有效（我只支持最新的浏览器，所以我尝试修改代码以使其更具复古兼容性）：

HTML:

编辑-添加了一个JSFIDLE演示来试用

---

如果不能使用stopPropagation，则必须重新构造dom，使其不嵌套。这可能吗？这个方法在Chrome 35.0.1916.153M版上对我不起作用，但$event.stopPropagation（）起作用。我不需要$event.returnValue.确切地说。在Chrome（和其他现代浏览器）中，您可以在第一行停止：

$event.stopPropagation（）（不带“if”）。但是，如注释中所述，如果需要使其在IE8 et less中工作，则必须使用
$event.preventDefault（）
或
cancelBuble/returnValue
。也许这两个版本中的一个不是必需的，我记不清了。@Ron，请查看演示并在不同的浏览器版本上试用。两者都
$event.cancelBubble=true
和
$event.returnValue=false
中断Chome/ium（在43.0.2357.130上测试）。@arcol您只需在之前进行检查即可：
如果（$event.cancelBubble）{$event.cancelBubble=true；}
。
function remove(item) {
  if (-1 == $scope.items.indexOf(item)) {
    // Item no longer exists, return early
    return;
  }
  // Rest of code here
}

<li ng-repeat="item in items" ng-click="showItem(item)">
    <h3>{{item.title}}</h3>
    <button ng-click="remove(item, $event)">Remove</button>
</li>

function remove(item, $event) {
    // do some code here

    // Prevent bubbling to showItem.
    // On recent browsers, only $event.stopPropagation() is needed
    if ($event.stopPropagation) $event.stopPropagation();
    if ($event.preventDefault) $event.preventDefault();
    $event.cancelBubble = true;
    $event.returnValue = false;
}
function showItem(item) {
    // code here
}