ホームページ > php教程 > PHP开发 > angular ngClick はデフォルトの動作を使用してバブリングを防止します

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

高洛峰
リリース: 2016-12-08 09:40:01
オリジナル
1447 人が閲覧しました

この記事の例では、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 プログラミングに携わるすべての人に役立つことを願っています。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート