web-dev-qa-db-ja.com

ng-クリックで親が子をクリックします

子として別の<div>要素を持つ<div>要素があります。

ng-clickディレクティブを親に追加しましたが、子をクリックしても起動されないことが予想されました。しかし、そうです。

<div class="outer" ng-click="toggle()">
    <div class="inner">You can click through me</div>
</div>

なぜこれを行うのですか、どうすれば回避できますか？

ここに JSFiddle が問題を示しています

javascripthtmlcssangularjs
51
Maeh

イベントの伝播をキャンセルする必要があるため、親要素のクリックイベントは呼び出されません。試してください：

<div class="outer" ng-click="toggle()">
    <div class="inner" ng-click="$event.stopPropagation()">You can click through me</div>
</div>

子要素をクリックすると、そのイベントがトリガーされます。しかし、それで終わりではありません。最初に子要素のクリックイベントがトリガーされ、次に親要素のクリックイベントがトリガーされます。これはイベント伝播と呼ばれます。イベント伝播（親クリックイベントのトリガー）を停止するには、上記の関数stopPropagationを使用する必要があります。

実施例

CSSのパディングを追加したので、例はより明確になりました。パディングなしでは、子要素は内部空間全体を占有し、子をクリックすることなく親をクリックすることはできません。

90
itd

親と子に異なる関数を設定する場合は、$ eventを子関数のパラメーターとして送信し、その内部でstopPropagationを送信できます。このような：

<div class="outer" ng-click="onParentClick()">
    <div class="inner" ng-click="onChildClick($event)">You can click through me</div>
</div>

そしてコントローラーで：

function onChildClick(event){
    event.stopPropagation();
    //do stuff here...
}
function onParentClick(){
    //do stuff here..
}
0
Felipe Rugai