与angularjs两个嵌套的单击事件 [英] Two nested click events with angularjs

问题描述

我有一个HTML的结构是这样的：

I have a HTML structure like this:

<div ng-click="test()">
    <div id="myId" ng-click="test2()"></div>
    <div></div>
    ...
</div>

目前，当我在 DIV 点击id为 MYID 那么这两个功能被触发，但我想那刚测试2 功能被触发。我该怎么做？

Currently when I click on the div with the id myId then both functions get triggered, but I want that just test2 function get triggered. How can I do that?

推荐答案

所有你需要做的是停止事件传播/冒泡。

All you need to do is to stop event propagation/bubbling.

这code可以帮助你：

This code will help you:

<div ng-click="test()">ZZZZZ
    <div id="myId" ng-click="test2();$event.stopPropagation()">XXXXX</div>
    <div>YYYYYY</div>
    ...
</div>

如果你的测试和测试2 功能将如下所示，你将只能得到测试2 在控制台中点击时， MYID DIV。如果没有 $ event.stopPropagation（）您将获得测试2 然后按测试在控制台输出窗口。

If your test and test2 functions would look as follows, you would get only test2 in your console when clicking on myId DIV. Without $event.stopPropagation() you would get test2 followed by test in the console output window.

$scope.test = function() {
    console.info('test');
}
$scope.test2 = function() {
    console.info('test2');
}

这篇关于与angularjs两个嵌套的单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！