我有一个<div>
元素,其中有另一个<div>
元素作为其子元素。
我将ng-click
指令添加到父级,并且期望在单击子级时不会触发它。但是,确实如此。
<div class="outer" ng-click="toggle()">
<div class="inner">You can click through me</div>
</div>
为什么要这样做,我该如何避免呢?
这里有JSFiddle证明问题
答案 0 :(得分:87)
您必须取消事件传播,因此不会调用父元素的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填充,因此示例更清晰。如果没有填充,子元素将占用整个内部空间,并且您无法在不单击子元素的情况下单击父元素。
答案 1 :(得分:0)
如果要为父项和子项设置不同的函数,可以将$ 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..
}