父元素上的ng-click事件会穿透子元素。

Question

我有一个包含另一个子元素<div>的<div>元素。

我在父元素上添加了ng-click指令，并期望在单击子元素时不会触发它。然而，它确实被触发了。

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

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

这里有一个JSFiddle演示了这个问题。

- Maeh

Answer 1

你需要取消事件传播，这样父元素的点击事件就不会被调用。尝试：

您必须取消事件传播，以便不会调用父元素的点击事件。 尝试：

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

当您单击子元素时，其事件会被触发。但不止如此，首先触发子元素的点击事件，然后触发父元素的点击事件，以此类推。这被称为事件传播。为了停止事件传播（触发父级单击事件），您需要使用上面的函数 stopPropagation。

---

工作示例

我添加了一些CSS填充，使示例更清晰。没有填充，子元素占据整个内部空间，您不能在不单击子元素的情况下单击父元素。

- Ziga Petek

---

如果.outer div里面没有直接的文本内容，那么如何使其可点击？ - Bhojendra Rauniyar

实际上，我刚刚测试了一下，我的上面的例子似乎可以正常工作。如果您在父元素上使用stopPropagation()而不是子元素，则不会产生预期的效果。这有点说得通，如果您想要防止触发父级事件，您必须在它被调用之前停止它。 - Ziga Petek

好的，我犯了一个错误，没有查看原始jsFiddle。如果有人想要查看已修复的OPs jsFiddle版本：http://jsfiddle.net/3ghzsg40/1/ - Ziga Petek

ng-click="$event.stopPropagation(); clickFunctionForInnerDiv();" 为了与父级动作有所区别，并且在调用 toggle() 后不执行。 - Andrew Tobilko

（点击）=“$event.stopPropagation()”对我有用。谢谢。 - Daisy

Answer 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..
}

- Felipe Rugai

---

对我来说完美地工作了！我只是在指令标签内调用stopPropagation()方法稍作修改。ng-click="onChildClick($event); $event.stopPropagation()" - Felipe Belluco

@FelipeRugai - 谢谢，这对我也有用...在我正确拼写stopPropagation之后。 :-P - rolinger