单击通过子项的父单击

Question

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

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

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

为什么要这样做，我该如何避免呢？

这里有JSFiddle证明问题

Answer 1

您必须取消事件传播，因此不会调用父元素的click事件。尝试：

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

单击子元素时，会触发其事件。但它并不止于此。首先触发子元素的click事件，然后触发父元素的click事件，依此类推。这称为事件传播，要停止事件传播（触发父项单击事件），您必须使用上述函数stopPropagation。

---

Working example

我添加了一些CSS填充，因此示例更清晰。如果没有填充，子元素将占用整个内部空间，并且您无法在不单击子元素的情况下单击父元素。

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