親divの角をクリックしてもすべての子divでトリガーされない

Question

parent DIVでng-clickイベントが発生しているため、関数を呼び出しています。子divがクリックされた場合ではなく、親divがクリックされた場合にのみ、このイベントがトリガーされるようにします。したがって、親の内側をクリックした領域が子divをカバーする場合、イベントはトリガしません。今、div2トリガーイベントをクリックします。

私の例では、here on code pen

HTML構造である：

<div id="div1" class="div1" ng-app="appModule" ng-controller="appController" ng-click="test();"> 
    <div id="div2" class="div2"> 
    </div> 
</div> 

このdiv要素（子のdiv）の内側DIV1（親DIV）とDIV2があります。親divのng-clickを入れました。なぜなら、div2ではなく、親のどこでもトリガーされる必要があるからです。どのように角度でこれを達成するには？

Answer 1

target要素とcurrentTargetこれはJavaScriptのイベントバブリングの問題である

HTML

<div id="div1" class="div1" ng-app="appModule" ng-controller="appController" ng-click="test($event);"> // Passing event object 
    // Rest of code 
</div> 

JS

$scope.test = function(e) { 
    if (e.target == e.currentTarget) { // checking if target and currentTarget is same 
    alert("test!"); 
    } else { 
    //Rest of code 

    } 

Answer 2

$event.targetを使用して、どの要素がクリックされたかを検証できます。操作を実行します。ここでの例では、私はあなたがNGクリックし、これを達成するために= "$するevent.stopPropagationを（）" を使用することができidプロパティ

<div id="div1" class="div1" ng-app="appModule" ng-controller="appController" ng-click="test($event);"> 
    <div id="div2" class="div2"> 
    </div> 
</div> 

スクリプト

$scope.test = function(event) { 
    if (event.target.id == 'div1') { 
     alert("test!"); 
    } 
} 

DEMO

Answer 3

を使用していました。これを行うと、たとえ子要素をクリックしても、そのイベントは親要素に伝播しません。

<div id="div1" class="div1" ng-app="appModule" ng-controller="appController" ng-click="test();"> 
<div id="div2" ng-click="$event.stopPropagation()" class="div2"> 
    </div> 
</div>