[解決済み】アンカータグで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アプリの至るところでこのディレクティブを使っています。
関連
-
[解決済み】angularのonLoadとng-initの違いについて
-
[解決済み] AngularJSのディープリンクとは何ですか?
-
[解決済み] AngularJSのng-repeatは、空のリストのケースを処理します。
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] クラスを条件付きで適用する場合の最適な方法は何ですか?
-
[解決済み] AngularJSのコントローラからビューにHTMLを挿入する
-
[解決済み] AngularJS テンプレートにおける if else ステートメント
-
[解決済み] AngularJSのng-optionsでvalueプロパティを設定するには?
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
-
[解決済み】AngularJSでアンカーハッシュのリンクを処理する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ページロード時にAngularJSのコントローラ関数を実行する方法は?
-
[解決済み] AngularJSのディープリンクとは何ですか?
-
[解決済み] AngularJSのシンプルな "Hello, world "が動作しない。
-
[解決済み] Angular 1.2+ で ng-bind-html-unsafe を複製するために $sce.trustAsHtml(string) を使用するにはどうしたらよいですか?
-
[解決済み] AngularJsでng-Cloakディレクティブを実際に使用する方法とは?
-
[解決済み] Angularのui-routerでデフォルトの状態を設定する方法
-
[解決済み] 誰かangularjsの$qサービスの使用について説明してください。[重複しています]。
-
angularでのng-repeatとtrack by
-
[解決済み] Angular.js: $evalの仕組みとバニラevalとの違いは何ですか?
-
[解決済み] angularJSの::の意味するところ