javascript - 当用户点击他的子元素时如何防止父点击事件? AngularJS

标签 javascript angularjs z-index

我有一个 <div>ng-click但是这个<div>有一个 子元素 也有一个 ng-click指示。 问题是子元素上的点击事件父元素点击事件。

如何在点击他的 child 时阻止父点击事件?

Here is a jsfiddle来说明我的情况。

预先感谢您的帮助。

编辑

这是我的代码:

<body ng-app ng-controller="TestController">
<div id="parent" ng-click="parentClick()">
    <div id="child" ng-click="childClick()"></div>

    <p ng-bind="elem"></p>
</div>

<div><p style="text-align:center" ng-bind="childElem"></p></div>
</body>

<script>
function TestController($scope) {
    $scope.parentClick = function() {
        $scope.elem = 'Parent';
    }

    var i = 1;
    $scope.childClick = function() {
        $scope.elem = 'Child';
        $scope.childElem = 'Child event triggered x' + i;
        i++;
    }
}
</script>

最佳答案

您应该使用 event.stopPropagation() 方法。 参见:http://jsfiddle.net/qu86oxzc/3/

<div id="child" ng-click="childClick($event)"></div>

$scope.childClick = function($event) {
    $event.stopPropagation();
    ...
}

关于javascript - 当用户点击他的子元素时如何防止父点击事件? AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33281148/

相关文章:

javascript - Jquery Ajax beforeSend 和成功、错误和完成

javascript - 让 forEach 等待回调

javascript - AngularJS Jasmine 测试失败 : Failed to instantiate module

angularjs - 如何将参数传递给 ng-click 函数?

javascript - 如何克隆该行并确保每行中的所有日期选择器都正常运行?

javascript - AngularJS 如何知道去哪里寻找要加载的模块?

css - 导航浮出控件不会在 IE 中显示

javascript - 无法控制 z-index 最小的 div

javascript - 为什么即使一个组件的 z-index 值大于其他目标组件,CSS z-index 属性也不起作用?

javascript - 如何从自身内部删除 iframe(已动态创建并使用 src 加载)