Fatal编程技术网
  • javascript/
  • Javascript 当用户单击其子元素时，如何防止父单击事件？安格拉斯

Javascript 当用户单击其子元素时，如何防止父单击事件？安格拉斯

javascript angularjs

Javascript 当用户单击其子元素时，如何防止父单击事件？安格拉斯,javascript,angularjs,z-index,Javascript,Angularjs,Z Index,我有一个和一个ng click，但是这个有一个子元素，还有一个ng click指令。 问题是子元素上的单击事件也会触发父元素的单击事件 <body ng-app ng-controller="TestController"> <div id="parent" ng-click="parentClick()"> <div id="child" ng-click="childClick();$event.stopPropagation();"></d

我有一个
和一个
ng click
，但是这个
有一个子元素，还有一个
ng click
指令。 问题是子元素上的单击事件也会触发父元素的单击事件

<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>
当我单击父对象的子对象时，如何防止父对象单击事件

来说明我的情况

提前感谢您的帮助

编辑

这是我的密码：

<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>






函数TestController（$scope）{
$scope.parentClick=function（）{
$scope.elem='Parent'；
}
var i=1；
$scope.childClick=function（）{
$scope.elem='Child'；
$scope.childElem='子事件触发x'+i；
i++；
}
}
您应该使用event.stopPropagation（）方法。 见：


$scope.childClick=函数（$event）{
$event.stopPropagation（）；
...
}
使用
event.stopPropagation
停止
事件从子事件处理程序冒泡到DOM树





功能测试控制器（$scope）{
$scope.parentClick=function（）{
$scope.elem='Parent'；
}
var i=1；
$scope.childClick=函数（e）{
$scope.elem='Child'；
$scope.childElem='子事件触发x'+i；
i++；
e、 stopPropagation（）；//停止冒泡事件
}
}


正文{
宽度：100%；
身高：100%；
溢出：隐藏；
}
#母公司{
宽度：100px；
高度：100px；
位置：相对位置；
z指数：1；
保证金：10px自动0自动；
背景色：#00acee；
边界半径：2px；
光标：指针；
}
#父：悬停{
不透明度：0.5；
}
#孩子{
宽度：20px；
高度：20px；
位置：绝对位置；
顶部：10px；
右：10px；
z指数：2；
背景色：#FFF；
边界半径：2px；
光标：指针；
}
#孩子：悬停{
不透明度：0.5；
}
#亲本p{
宽度：100%；
位置：绝对位置；
底部：0px；
文本对齐：居中；
颜色：#FFF；
}








即使Pieter Willaert的答案更漂亮，我还是用一个简单的布尔检查更新了你的小提琴：




你也可以用它来做同样的事情


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



您也可以尝试
$event.stopPropagation（）。在子函数之后编写它。它的工作方式就像一个默认值


<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>









关闭子处理程序的事件冒泡，或者使用event.target/this/yourFrameworkImplementationofeventTarget检查处理程序中单击的内容OK，我现在觉得很愚蠢，但谢谢你，这正是我想要的。我没有考虑过这一点，因为我一般都不会通过元素测试。但是，有没有其他方法可以在不停止播放的情况下执行此操作？你“可以”执行类似的操作，但我认为这真的很难看。阻止事件在更高的位置鸣叫是正确的做法（imo），您还可以查看事件的目标（如果$event.target==childElement）

<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>