点击当前标签

Question

我有一个通用容器，它是全屏背景，里面有小的 div 内容。在一般容器中，我有 ng-click，当我点击小 div 时激活。我怎样才能禁用它？

<div class="generalContainer" ng-click="onlyBackground()">
    <div class="smallDiv">Content</div>
</div>

我尝试在背景和小 div 上添加 z-index，但仍然在小 div 上激活功能。我不确定是 css 问题还是 angular.

Answer 1

您的元素有位置属性吗？ z-index 仅在元素具有位置属性.

时才有效

.generalContainer {
    position: relative;
    z-index: 1;
}
.smallDiv {
    position: relative;
    z-index: 9;
}

Answer 2

在 dom 中有子元素会影响父元素 ng-click。这是因为事件在 Dom 树中上升。您可以通过强制停止传播来忽略它：使用：

<div class="generalContainer" ng-click="onlyBackground()">
    <div class="smallDiv" ng-click="$event.stopPropagation();">Content</div>
</div>

当您单击 smallDiv 时，然后单击要传播到父级。

ng-click on current tag