【问题标题】：ng-click on parent clicks through childrenng-click on parent 点击子项
【发布时间】：2015-03-16 14:37:32
【问题描述】：

我有一个 <div> 元素，它有另一个 <div> 元素作为其子元素。

我向父级添加了ng-click 指令，并希望在单击子级时不会触发它。但是，确实如此。

<div class="outer" ng-click="toggle()">
    <div class="inner">You can click through me</div>
</div>

为什么会这样，我该如何避免？

这是一个 JSFiddle 演示问题

【问题讨论】：

【解决方案1】：

你必须取消事件传播，所以父元素的点击事件不会被调用。试试：

<div class="outer" ng-click="toggle()">
    <div class="inner" ng-click="$event.stopPropagation()">You can click through me</div>
</div>

当您单击子元素时，会触发其事件。但它并不止于此。首先触发子元素的点击事件，然后触发父元素的点击事件，以此类推。这就是所谓的事件传播，要停止事件传播（触发父母点击事件），你必须使用上面的函数，stopPropagation。

Working example

我添加了一些 CSS 填充，因此示例更清晰。不填充子元素会占据整个内部空间，如果不点击子元素就无法点击父元素。

【讨论】：

.outer div 如果没有任何文字直接在里面怎么可能是可点击的。
并且 e.stopPropagation() 应该用在父 div 而不是子 div 中，这样子 div 就不能被分配点击事件......
没错，我会调整我的答案并添加一个工作示例
其实，我刚刚测试过，我上面的例子似乎工作正常。如果在父元素而不是子元素上使用 stopPropagation()，它不会产生预期的效果。有点道理，如果你想阻止父母事件被触发，你必须在它被调用之前停止它。
好吧，我犯了一个错误，没有看 OP 的原始 jsFiddle。如果有人想查看 OPs jsFiddle 的固定版本：jsfiddle.net/3ghzsg40/1

【解决方案2】：

如果你想为父子函数设置不同的函数，你可以发送 $event 作为子函数的参数，并在其中 stopPropagation。像这样：

<div class="outer" ng-click="onParentClick()">
    <div class="inner" ng-click="onChildClick($event)">You can click through me</div>
</div>

在你的控制器中：

function onChildClick(event){
    event.stopPropagation();
    //do stuff here...
}
function onParentClick(){
    //do stuff here..
}

【讨论】：

非常适合我！我只是通过在指令标记内调用stopPropagation() 方法进行了一些更改。 ng-click="onChildClick($event); $event.stopPropagation()"
@FelipeRugai - 谢谢，这对我也有用....在我正确拼写 stopPropOgation 之后。 :-P