Javascript 单击另一个div上方的第二个元素的事件不触发

我有一个类似下图的项目

1：单击打开详细信息页面
2：单击可切换项目状态（真/假）并停留在此页面

元素2位置：元素1上方的绝对位置
当我单击元素2时，单击元素1上的事件触发，页面重定向到详细信息页面，元素2没有事件触发。

以下是我的设计和代码：

<div class="investment-content_image" ng-click="open(item.id)">
        <div class="closed-overlay-fra">
            <img class="closed-photo" ng-src="{{item.getClosedImage()}}" />
        </div>
        <div class="investment-content-closed" ng-if="!item.open" ng-class="{'active': hovering}" ng-click="open(item.id)">
            <span class="investment-content-closed-text">SOLD OUT</span>
        </div>
        <label class="toggle-switch" ng-if="user.isAdvisor()" ng-click="updateHideInvestment()">
            <input type="checkbox" ng-model="item.hide_investor">
            <div class="switch-slider">
                <span class="glyphicon glyphicon-ok"></span>
                <span class="glyphicon glyphicon-remove"></span>
            </div>
        </label>
    </div>


$scope.open = function (id) {
        if (!$scope.user) {
            return;
        }
        if ($scope.user.isAdmin()) {
            $state.go('admin.showInvestment.overview', {investmentId: id});
        } else if ($scope.user.isInvestor()) {
            $state.go('investor.showInvestment.overview', {investmentId: id});
        } else if ($scope.user.isAdvisor()) {
            $state.go('advisor.showInvestment.overview', {investmentId: id});
        }
    };

$scope.updateHideInvestment = function () {
        let data = {
            id: $scope.item.id,
            hide: $scope.item.hide_investor
        };

        advisorsSvc.updateHideInvestment(data)
            .then((result) => {
                $scope.item.hide_investor = result.hide_investor;
            })
            .catch((err) => { throw err; });
    }

售罄
$scope.open=函数（id）{
if（！$scope.user）{
返回；
}
if（$scope.user.isAdmin（））{
$state.go（'admin.showInvestment.overview'，{investmentId:id}）；
}else if（$scope.user.isInvestor（））{
$state.go（'investor.showInvestment.overview'，{investmentId:id}）；
}else if（$scope.user.isAdvisor（））{
$state.go（'advisor.showInvestment.overview'，{investmentId:id}）；
}
};
$scope.updateHideInvestment=函数（）{
让数据={
id:$scope.item.id，
隐藏：$scope.item.hide\u
};
advisorsvc.updateHideInvestment（数据）
。然后（（结果）=>{
$scope.item.hide_investor=result.hide_investor；
})
.catch（（err）=>{throw err；}）；
}

ng单击

将侦听元素和所有子元素中的所有单击事件

为了防止外层受到点击，需要阻止点击向上传播

ng-click="$event.stopPropagation(); open(item.id)"

---

你也能提供css吗？这里是使用JQuery的简化版本

HTML:

JavaScript:

$("#first").click(function()
{
    alert("first");
});

$("#second").click(function()
{
    alert("second");
});

---

这可能是一个与事件冒泡相关的问题。在元素上触发事件时，其所有父元素也将触发此事件。事件在一个接一个的父事件中冒泡。您需要在最低级别上停止事件的传播

为此，您必须通过让angular将生成的click事件传递给您的函数来获取该事件

<label class="toggle-switch" ng-if="user.isAdvisor()" ng-click="updateHideInvestment($event)">

---

这将防止事件冒泡，从而防止触发您的

open

功能。

请提供不适用于您的HTML和当前代码。如果您可以添加一个工作代码段来演示问题，那么这是最好的选择。看见► 任何代码都将不胜感激。对不起，我已经更新了代码。

$("#first").click(function()
{
    alert("first");
});

$("#second").click(function()
{
    alert("second");
});

<label class="toggle-switch" ng-if="user.isAdvisor()" ng-click="updateHideInvestment($event)">

$scope.updateHideInvestment = function (event) {
  event.stopPropagation()
  // Rest of your code here
}