另一个 div 上方的第二个元素不会触发 Click 事件答案

【问题标题】：Click event not fire for the second element above another div另一个 div 上方的第二个元素不会触发 Click 事件
【发布时间】：2017-02-23 19:35:40
【问题描述】：

我有一个类似下图的物品

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

【问题讨论】：

请提供不适合您的 HTML 和当前代码。最好添加一个工作代码 sn-p 来演示问题。见 ►How to create a Minimal, Complete, and Verifiable example
任何代码都将不胜感激。
对不起，我已经更新了代码。

标签： javascript jquery html css angularjs

【解决方案1】：

ng-click 将监听元素内的所有点击事件以及所有子元素。

为了防止外层获得点击，您需要阻止点击向上传播。

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

【讨论】：

【解决方案2】：

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

HTML：

<div id="first"></div>
<div id="second"></div>

CSS：

#first
{
  position:absolute;
  background-color:red;
  width:300px;
  height:300px;
}

#second
{
  position:absolute;
  margin-left:200px;
  margin-top:200px;
  background-color:green;
  width:50px;
  height:50px;
}

JavaScript：

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

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

https://jsfiddle.net/maximelian/mkgmL83r/

【讨论】：

【解决方案3】：

这可能是与事件冒泡相关的问题。当一个元素触发一个事件时，它的所有父元素也会触发这个事件。该事件正在父级后冒泡。您需要在最低级别停止事件的传播。

为此，您必须让 angular 将生成的点击事件传递给您的函数。

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

在函数本身中，您必须接受事件并停止其传播。

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

这将防止事件冒泡，从而防止您的open函数被触发。

【讨论】：