2016.10.22
2017.4.17

入れ子になったクリックイベントで親への伝搬を止める方法

AngularJSでクリックイベントを登録すると通常では親要素に登録したイベントまで実行されてしまうので、上階層への伝搬を止める方法です。

コード

実行したいメソッドの後ろで、$event.stopPropagation()を呼び出すことでイベントが親へ伝搬されなくなります。


<div ng-click="test1()">
    <button ng-click="test2();$event.stopPropagation()">
        テスト
    </button>
</div>

上記コードの場合、test2()は実行されるが、test1()は実行されなくなる。

AngularJS】関連記事