单击通过子项的父单击

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.

工作实例

我添加了一些CSS填充,因此示例更清晰.如果没有填充,子元素占用整个内部空间,您无法单击父级而不单击子级.