Angenommen, ich habe ein Ankertag wie
<a href="#" ng-click="do()">Click</a>
Wie kann ich verhindern, dass der Browser in AngularJS zu # navigiert ?
angularjs
preventdefault
Glimmer
quelle
quelle
href
.href=''
um das Verhalten des Mauszeigers beizubehalten.Antworten:
UPDATE : Seitdem habe ich meine Meinung zu dieser Lösung geändert. Nach mehr Entwicklung und Zeitaufwand glaube ich, dass eine bessere Lösung für dieses Problem darin besteht, Folgendes zu tun:
Und aktualisieren Sie dann Ihre
css
, um eine zusätzliche Regel zu haben:Es ist viel einfacher und bietet genau die gleiche Funktionalität und ist viel effizienter. Ich hoffe, dass dies für alle anderen hilfreich sein kann, die in Zukunft nach dieser Lösung suchen.
Das Folgende ist meine vorherige Lösung, die ich hier nur aus Legacy-Gründen lasse:
Wenn Sie dieses Problem häufig haben, ist eine einfache Anweisung, die dieses Problem beheben würde, die folgende:
Es überprüft alle Ankertags (
<a></a>
), um festzustellen, ob ihrhref
Attribut entweder eine leere Zeichenfolge (""
) oder ein Hash ('#'
) ist oder ob eineng-click
Zuweisung vorliegt. Wenn eine dieser Bedingungen gefunden wird, wird das Ereignis abgefangen und das Standardverhalten verhindert.Der einzige Nachteil ist, dass diese Anweisung für alle Ankertags ausgeführt wird. Wenn Sie also viele Ankertags auf der Seite haben und das Standardverhalten nur für eine kleine Anzahl von Tags verhindern möchten, ist diese Anweisung nicht sehr effizient. Ich möchte dies jedoch fast immer
preventDefault
, daher verwende ich diese Anweisung überall in meinen AngularJS-Apps.quelle
href
Attribut in verschiedenen Browsern ein unterschiedliches Verhalten. Obwohl ich der Meinung bin, dass es bei weitem die sauberste und effizienteste Lösung ist, gibt es einige browserübergreifende Probleme. Die Verwendung des Direktivenansatzes ermöglicht es dem Browser, das<a>
Tag wie gewohnt zu behandeln , dem OP jedoch die Antwort zu geben, nach der er gesucht hat.Gemäß den Dokumenten für ngHref sollten Sie in der Lage sein, die href wegzulassen oder href = "" zu tun.
quelle
Sie können das $ event-Objekt an Ihre Methode übergeben und es aufrufen
$event.preventDefault()
, damit die Standardverarbeitung nicht erfolgt:quelle
$event.preventDefault()
... IE-Steuer erforderlich ist .ng-click="do(); $event.preventDefault()
Zum Beispiel ... obwohl dies nicht erforderlich ist, da die Antwort von @ Chris unten die richtige ist. Dies kann Personen in Situationen helfen, in denen sie ngClicks verschachtelt haben und aufrufen möchten$event.stopPropagation()
.Ich bevorzuge es, Anweisungen für solche Dinge zu verwenden. Hier ist ein Beispiel
Und der Direktivencode für
eat-click
:Jetzt können Sie das
eat-click
Attribut jedem Element hinzufügen und es wirdpreventDefault()
automatisch bearbeitet.Leistungen:
$event
Objekt nicht an Ihredo()
Funktion übergeben.$event
Objekt nicht ausgeblendet werden mussquelle
Error: $ is not defined
. Was vermisse ich?angular.element(element).bind('click', function(event){...});
. Es funktionierte. Ref: jQLiteObwohl Renaud eine tolle Lösung gab
Ich persönlich habe festgestellt, dass Sie in einigen Fällen auch $ event.stopPropagation () benötigen, um einige der Nebenwirkungen zu vermeiden
wird meine Lösung sein
quelle
quelle
Die einfachste Lösung, die ich gefunden habe, ist diese:
quelle
Wenn Sie diese Antworten durchlesen, hat @Chris immer noch die "richtigste" Antwort, aber es gibt ein Problem: Der "Zeiger" wird nicht angezeigt.
Es gibt also zwei Möglichkeiten, um dieses Problem zu lösen, ohne einen Cursor hinzufügen zu müssen: Zeigerstil:
Verwenden Sie
javascript:void(0)
anstelle von#
:Verwendung
$event.preventDefault()
in derng-click
Direktive (damit Sie Ihren Controller nicht mit DOM-bezogenen Referenzen überladen):Ich persönlich bevorzuge das erstere gegenüber dem letzteren.
javascript:void(0)
hat andere Vorteile, die hier diskutiert werden . Es gibt auch eine Diskussion über "unauffälliges JavaScript" in diesem Link, der erschreckend neu ist und nicht unbedingt direkt auf eine Winkelanwendung zutrifft.quelle
javascript:;
Sie können wie folgt vorgehen
1.Entfernen Sie das
href
Attribut vom anchor (a
) -Tag2. Setzen Sie den Zeigercursor in CSS auf ng click-Elemente
quelle
HTML
hier pure anglejs: In der Nähe der ng-click-Funktion können Sie die Funktion prepareDefault () schreiben, indem Sie das Semikolon trennen
JS
(oder)
Sie können so vorgehen, dies wird hier bereits besprochen.
HTML
JS
quelle
Versuchen Sie diese Option, die ich sehen kann, ist oben noch nicht aufgeführt:
quelle
Warum benötigen Sie Links, da Sie eine Web-App erstellen?
Tauschen Sie Ihre Anker gegen Knöpfe!
quelle
falls noch relevant:
quelle
Der sicherste Weg, Ereignisse auf einer href zu vermeiden, besteht darin, sie als zu definieren
quelle
Ich würde gehen mit:
Insgesamt war dies für mich verwirrend, daher habe ich dort eine JSFiddle erstellt, die zeigt, wann und wo Angular die Standardeinstellung verhindert .
Die JSFiddle verwendet Angulars Direktive - daher sollte sie genau gleich sein. Sie können den Quellcode hier sehen: einen Tag-Quellcode
Ich hoffe, dass dies für einige zur Klärung beiträgt.
Ich hätte das Dokument gerne bei ngHref gepostet, kann es aber aufgrund meines Rufs nicht.
quelle
Das mache ich immer. Klappt wunderbar!
quelle
Oder wenn Sie Inline benötigen, können Sie dies tun:
quelle
Viele Antworten scheinen übertrieben zu sein. Für mich funktioniert das
quelle
Ich benötige den Wert des href-Attributs für die Verschlechterung (wenn js ausgeschaltet ist), daher kann ich kein leeres href-Attribut (oder "#") verwenden, aber der obige Code hat bei mir nicht funktioniert, da ich ein Ereignis benötige ( e) variabel. Ich habe meine eigene Direktive erstellt:
In HTML:
quelle
Aus der Antwort von Tennisgent entlehnt. Ich finde es gut, dass Sie keine benutzerdefinierte Direktive erstellen müssen, um alle Links hinzuzufügen. Ich konnte ihn jedoch nicht dazu bringen, in IE8 zu arbeiten. Hier ist, was endlich für mich funktioniert hat (mit Angular 1.0.6).
Beachten Sie, dass Sie mit 'bind' jqLite verwenden können, das von angle bereitgestellt wird, sodass Sie nicht mit der vollständigen jQuery umbrechen müssen. Erforderlich ist auch die stopPropogation-Methode.
quelle
dropdown
, möchte ich die Weitergabe, aber nicht das Standardverhalten. Dieses Snippet wird NICHT empfohlen.Ich bin auf dasselbe Problem gestoßen, als ich Anker für ein eckiges Bootstrap-Dropdown verwendet habe. Die einzige Lösung, die ich gefunden habe, um unerwünschte Nebenwirkungen zu vermeiden (dh das Dropdown-Menü, das aufgrund der Verwendung von präventDefault () nicht geschlossen wurde), war die Verwendung der folgenden:
quelle
Wenn Sie niemals zu href gehen möchten, sollten Sie Ihr Markup ändern und eine Schaltfläche verwenden, die kein Ankertag ist, da es sich semantisch nicht um einen Anker oder einen Link handelt. Umgekehrt, wenn Sie eine Schaltfläche haben, die einige Überprüfungen durchführt und diese dann umleitet, sollte es sich um ein Link- / Anker-Tag und nicht um eine Schaltfläche handeln ... auch für SEO-Zwecke [Test-Suite hier einfügen].
Für Links, die Sie nur unter bestimmten Bedingungen umleiten möchten, z. B. die Aufforderung zum Speichern von Änderungen oder das Bestätigen des fehlerhaften Status ... sollten Sie ng-click = "someFunction ($ event)" und in someFunction für validationError verhindernDefault und / oder stopPropagation verwenden.
auch nur weil du kannst, heißt das nicht, dass du es solltest . Javascript: void (0) hat früher gut funktioniert ... aber wegen der schändlichen Hacker / Cracker-Browser kennzeichnen Apps / Websites, die Javascript in einem href verwenden ... siehe oben keinen Grund, sich zu ducken.
Es ist 2016, seit 2010 sollte es keinen Grund geben, Links zu verwenden, die wie Schaltflächen wirken. Wenn Sie IE8 und darunter noch unterstützen müssen, müssen Sie Ihren Geschäftssitz neu bewerten.
quelle
quelle
Was Sie tun sollten, ist das
href
Attribut vollständig wegzulassen .Wenn Sie sich den Quellcode für die
a
Elementanweisung ansehen (die Teil des Angular-Kerns ist), heißt es in Zeile 29 - 31:Das heißt, Angular löst bereits das Problem der Links ohne href. Das einzige Problem, das Sie noch haben, ist das CSS-Problem. Sie können den Zeigerstil weiterhin auf Anker mit ng-Klicks anwenden, z.
Sie können Ihre Website also sogar zugänglicher machen, indem Sie echte Links mit einem subtilen, anderen Stil als Links markieren, die Funktionen ausführen.
Viel Spaß beim Codieren!
quelle
Sie können die URL-Umleitung im Html5Mode von $ location deaktivieren, um das Ziel zu erreichen. Sie können es innerhalb des spezifischen Controllers definieren, der für die Seite verwendet wird. Etwas wie das:
quelle
Wenn Sie Angular 8 oder höher verwenden, können Sie eine Direktive erstellen:
Auf Ihrem Ankertag auf der Komponente können Sie es wie folgt verkabeln:
App-Modul sollte seine Erklärung haben:
quelle
Eine Alternative könnte sein:
quelle
span
zum Klicken zu missbrauchen . Gehen Sie einfach zur Antwort von @ Tennisgent - Anker ohnehref
Definition.