通过儿童点击父母点击

我有一个<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填充，所以这个例子更清晰。 如果没有填充，则子元素将占据整个内部空间，并且无需单击父级，就不能单击父级。