1. ホーム
  2. angularjs

[解決済み】アンカータグでpreventDefaultする方法は?

2022-03-25 17:01:06

質問

例えば、次のようなアンカータグがあるとします。

<a href="#" ng-click="do()">Click</a>

の#にブラウザが移動するのを防ぐにはどうしたらよいでしょうか? AngularJS ?

どのように解決するのですか?

アップデイト : 私はその後、この解決策について考えを改めました。 さらに開発を進め、時間をかけて取り組んだ結果、この問題に対するより良い解決策は、次のようにすることだと考えています。

<a ng-click="myFunction()">Click Here</a>

を更新して css を追加してください。

a[ng-click]{
    cursor: pointer;
}

これよりずっとシンプルで、まったく同じ機能を提供し、ずっと効率的です。 今後、この解決策を調べる人の参考になれば幸いです。


以下は、私が以前行った解決策ですが、レガシーな目的のためにここに残しておきます。

もし、この問題が多発しているのであれば、この問題を解決する簡単なディレクティブは以下の通りです。

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                elem.on('click', function(e){
                    e.preventDefault();
                });
            }
        }
   };
});

これは、すべてのアンカータグ( <a></a> を使用するかどうかを確認します。 href 属性が空文字列 ( "" ) またはハッシュ ( '#' ) があるか、あるいは ng-click を割り当てます。 これらの条件のいずれかを見つけた場合、イベントを捕捉し、デフォルトの動作を阻止します。

唯一の欠点は、すべてのアンカータグに対してこのディレクティブが実行されることです。 そのため、ページ上にたくさんのアンカータグがあり、そのうちの少数のアンカータグに対してだけデフォルトの挙動を防ぎたい場合、このディレクティブはあまり効率的ではありません。 しかし、私はほとんどいつも preventDefault というわけで、私はAngularJSアプリの至るところでこのディレクティブを使っています。