javascript - anglejsを使用した2つのネストされたクリックイベント

Question

私は次のようなHTML構造を持っています：

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

div現在、IDを指定してをクリックすると、myId両方の関数がトリガーされますが、関数だけがトリガーされるようにしたいと思いtest2ます。どうやってやるの？

Answer 1

イベントの伝播/バブリングを停止するだけです。

このコードは次のことに役立ちます。

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

関数testとtest2関数が次のようになっている場合、 DIVtest2をクリックしたときにコンソールにのみ表示されます。myIdそうしない$event.stopPropagation()と、コンソール出力ウィンドウで 次のように表示test2されます。test

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

Answer 2

トムの答えと同じですが、少し違います。

        <div ng-click="test()">
            <div id="myId" ng-click="test2($event)">child</div>
        </div>

        $scope.test2 =function($event){
            $event.stopPropagation();
            console.log("from test2")
        }
        $scope.test =function(){
            console.log("from test")
        }