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

Question

我有一个如下图所示的项目

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; });
    }