两个带有 angularjs 的嵌套点击事件 [英] Two nested click events with angularjs

问题描述

我有一个这样的 HTML 结构:

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

目前，当我点击带有 id myId 的 div 时，两个函数都会被触发，但我希望只有 test2 函数被触发.我该怎么做?

解决方案

您需要做的就是停止事件传播/冒泡.

此代码将帮助您:

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

如果您的 test 和 test2 函数如下所示，当您点击 myId 时，您将在控制台中只获得 test2 DIV.如果没有 $event.stopPropagation()，您将在控制台输出窗口中看到 test2 后跟 test.

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

I have a HTML structure like this:

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

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.

This code will help you:

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

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