如何在用户单击其子元素时阻止父点击事件？ AngularJS
[英]How to prevent parent click event when the user clicks on his child element? AngularJS
问题描述
I have a <div> with a ng-click but this <div> have a child element with also a ng-click directive. 
我有一个带有ng-click的<div> ，但是这个<div>有一个带有ng-click指令的子元素 。 The problem is that the click event on the child element trigger also the click event of the parent element . 问题是， 子元素上的click事件 也会触发父元素的click事件 。
How can I prevent the parent click event when I click on his child? 当我点击他的孩子时，如何阻止父点击事件？
Here is a jsfiddle to illustrate my situation. 这是一个jsfiddle来说明我的情况。
Thank you in advance for your help. 预先感谢您的帮助。
EDIT 编辑
Here is my code: 这是我的代码：
<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>
5 个解决方案
解决方案1
24 2015-10-22 12:36:44
You should use the event.stopPropagation() method. 您应该使用event.stopPropagation（）方法。 see: http://jsfiddle.net/qu86oxzc/3/ 见： http ： //jsfiddle.net/qu86oxzc/3/
<div id="child" ng-click="childClick($event)"></div>
$scope.childClick = function($event) {
$event.stopPropagation();
...
}
解决方案2
6 2015-10-22 12:39:12
Use event.stopPropagation to stop the event from bubbling up the DOM tree from child event handler. 使用event.stopPropagation来阻止event从子事件处理程序冒泡DOM树。
function TestController($scope) { $scope.parentClick = function() { $scope.elem = 'Parent'; } var i = 1; $scope.childClick = function(e) { $scope.elem = 'Child'; $scope.childElem = 'Child event triggered x' + i; i++; e.stopPropagation(); // Stop event from bubbling up } }
body { width: 100%; height: 100%; overflow: hidden; } #parent { width: 100px; height: 100px; position: relative; z-index: 1; margin: 10px auto 0 auto; background-color: #00acee; border-radius: 2px; cursor: pointer; } #parent:hover { opacity: 0.5; } #child { width: 20px; height: 20px; position: absolute; top: 10px; right: 10px; z-index: 2; background-color: #FFF; border-radius: 2px; cursor: pointer; } #child:hover { opacity: 0.5; } #parent p { width: 100%; position: absolute; bottom: 0px; text-align: center; color: #FFF; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> <body ng-app ng-controller="TestController"> <div id="parent" ng-click="parentClick()"> <div id="child" ng-click="childClick($event)"></div> <!-- ^^^^^^^ --> <p ng-bind="elem"></p> </div> <div> <p style="text-align:center" ng-bind="childElem"></p> </div> </body>
解决方案3
4 2015-10-28 11:25:34
也可以使用它，因为它使用相同。
<div id="child" ng-click="childClick();$event.stopPropagation();"></div>
解决方案4
2 2015-10-22 12:40:42
Even if Pieter Willaert's answer is much more beautiful i updated your fiddle with a simple boolean check: 即使Pieter Willaert的答案更加美丽，我还是通过一个简单的布尔检查来更新你的小提琴：
http://jsfiddle.net/qu86oxzc/6/ http://jsfiddle.net/qu86oxzc/6/
function TestController($scope) {
$scope.boolean = false;
$scope.parentClick = function () {
if (!$scope.boolean) $scope.elem = 'Parent';
$scope.toggleBoolean();
}
var i = 1;
$scope.childClick = function () {
$scope.boolean = true;
$scope.elem = 'Child';
$scope.childElem = 'Child event triggered x' + i;
i++;
}
$scope.toggleBoolean = function () {
$scope.boolean = !$scope.boolean;
}
}
解决方案5
0 2016-12-23 12:44:40
You can also try $event.stopPropagation(); 你也可以尝试$event.stopPropagation(); . 。 write it after the child function. 在子函数之后写它。 It working like a preventdefault . 它像防止故障一样工作。
<body ng-app ng-controller="TestController">
<div id="parent" ng-click="parentClick()">
<div id="child" ng-click="childClick();$event.stopPropagation();"></div>
<p ng-bind="elem"></p>
</div>
<div><p style="text-align:center" ng-bind="childElem"></p></div>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.