javascript 当用户单击其子元素时如何防止父单击事件？AngularJS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33281148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent parent click event when the user clicks on his child element? AngularJS
提问by KeizerBridge
I have a <div>with a ng-clickbut this <div>have a child elementwith also a ng-clickdirective.
The problem is that the click event on the child elementtrigger alsothe click event of theparent element.
我有一个<div>with ang-click但这<div>有一个子元素也有一个ng-click指令。问题是子元素上的点击事件也会触发父元素的点击事件。
How can I prevent the parent click event when I click on his child?
当我点击他的孩子时，如何防止父点击事件？
Here is a jsfiddleto 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>
回答by Pieter Willaert
You should use the event.stopPropagation() method. see: http://jsfiddle.net/qu86oxzc/3/
您应该使用 event.stopPropagation() 方法。见：http: //jsfiddle.net/qu86oxzc/3/
<div id="child" ng-click="childClick($event)"></div>
$scope.childClick = function($event) {
$event.stopPropagation();
...
}
回答by Tushar
Use event.stopPropagationto stop the eventfrom 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>回答by Nadeem
also you can use this as it use do the same.
你也可以用它来做同样的事情。
<div id="child" ng-click="childClick();$event.stopPropagation();"></div>
回答by messerbill
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;
}
}
回答by Ajay Gupta
You can also try $event.stopPropagation();. write it after the child function. It working like a preventdefault.
你也可以试试$event.stopPropagation();。写在子函数之后。它就像一个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>
