Angular JS 限制同一 div 中的 ng 点击事件

Question

当我单击内部 a 标签时，这两个函数都会触发，我该如何限制它。我只需要在单击时才触发 onDelete(( 函数

<div ng-click="ctrl.onEdit()">
{{content}}
<a href="" ng-click="ctrl.onDelete()" > Delete Me !</a>
</div>

Answer 1

在ctrl.onDelete($event(中传递$event，然后在删除函数中停止传播它，你需要这个，因为事件会向父元素冒泡

this.onDelete = function (event){
event.stopPropagation(); 
}

或者只是在 HTML 中打开删除函数后编写此内容

ng-click="ctrl.onDelete(); $event.stopPropagation();"

Answer 2

您可以通过传递$event并使用stopPropagation来实现这一点：

<div ng-click="onEdit($event)" style="background-color:red;">
{{content}}
<a href="" ng-click="onDelete($event)" > Delete Me !</a>
</div>

.JS

$scope.onEdit = function(event){
console.log("onEdit");
event.stopPropagation();        
}
$scope.onDelete = function(){
console.log("onDelete");
event.stopPropagation();        
}

演示普伦克

尔

---

但是，使用嵌套ng-click并不是好的做法。它难以维护，并可能导致意外行为。

Answer 3

<div ng-click="ctrl.onEdit()">
{{content}}
</div>
<div>
<a href="" ng-click="ctrl.onDelete()" > Delete Me !</a>
</div>

我认为它会像这样工作

Answer 4

这称为事件冒泡。您可以像这样传播事件并取消它

function onDelete($event){
if($event){
if ($event.stopPropagation) $event.stopPropagation();
if ($event.preventDefault) $event.preventDefault();
}
}

.HTML

<div ng-click="ctrl.onEdit()">
{{content}}
<a href="" ng-click="ctrl.onDelete($event)" > Delete Me !</a>
</div>