angular ngClick はデフォルトの動作を使用してバブリングを防止します

この記事の例では、angular ngClick がバブリングを防止し、デフォルトの動作を使用する方法について説明します。参考までに皆さんと共有してください。詳細は次のとおりです:

これは実際には非常に単純な質問です。Angular の公式 API ドキュメントを注意深く読んだことがある方なら、記録する必要はないでしょう。しかし、この質問は何度も聞かれたので、今日はここに記録しておきます。

Angular では、$event と呼ばれる変数が ngClick、ngBlur、ngCopy、ngCut、ngDblclick などの一部の ng イベントに追加されました...

ngClick については公式ドキュメントで説明されています:

クリック時に評価する式。 (イベントオブジェクトは $event として利用可能です)

Angular コード ngEventDirs.js:

var ngEventDirectives = {};
forEach(
   'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste'.split(' '),
   function(name) {
    var directiveName = directiveNormalize('ng-' + name);
    ngEventDirectives[directiveName] = ['$parse', function($parse) {
     return {
      compile: function($element, attr) {
       var fn = $parse(attr[directiveName]);
       return function(scope, element, attr) {
        element.on(lowercase(name), function(event) {
         scope.$apply(function() {
          fn(scope, {$event:event});
         });
        });
       };
      }
     };
    }];
   }
);

を見ると

上記のコードでは 2 つの情報を取得できます:

① Angular でサポートされるイベント: dblclick をクリックします。マウスダウン マウスアップ マウスオーバー マウス移動 マウスエンター キーダウン キーアップ キープレス 送信 フォーカス ブラー コピー カット ペースト

②. Angular がイベント関数を実行するとき、Angular If の前に導入すると、現在のイベント オブジェクトを表す $event という名前の定数が渡されます。 jQuery をお持ちの場合、これは jQuery のイベントです。

そこで、イベントの stopPropagation を使用してイベントのバブリングを防ぐことができます。

jsbinで効果を確認できます。

まずコンソールを開き、「伝播の停止」を選択せず​​にボタンをクリックすると、逆に、それを選択すると、ボタンのログ情報のみが表示されます。

この記事が AngularJS プログラミングに携わるすべての人に役立つことを願っています。