Wie verhindert manDefault auf Anchor-Tags?

Sagen wir, ich habe einen Anker-tag wie

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

Wie kann ich verhindern, dass der browser von Navigation # in AngularJS ?

InformationsquelleAutor der Frage Micael | 2012-06-07

angularjs preventdefault

250

UPDATE: ich hab da meine Meinung geändert, auf diese Lösung. Nach mehr Entwicklung und die verbrachte Zeit der Arbeit an diesem, ich glaube, eine bessere Lösung zu diesem problem ist Folgendes zu tun:
```
<a ng-click="myFunction()">Click Here</a>
```
Und dann aktualisieren Sie Ihre css haben eine zusätzliche Regel:
```
a[ng-click]{
    cursor: pointer;
}
```
Seine viel einfacher und bietet die gleiche Funktionalität und ist viel effizienter. Hoffe, die hilfreich sein könnten, um jemand anderes suchen, bis diese Lösung in der Zukunft.

Das folgende ist meine bisherige Lösung, auf die ich mich verlassen hier, nur für legacy-Zwecke:

Wenn Sie dieses problem sehr, eine einfache Richtlinie, die würde dieses Problem beheben, ist die folgende:
```
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();
                });
            }
        }
   };
});
```
Er prüft alle Anker-tags ( <a></a> ), um zu sehen, wenn Ihre href Attribut ist entweder eine leere Zeichenfolge ("") oder einer Raute ('#') oder es ist ein ng-click Zuordnung. Wenn es feststellt, dass eine dieser Bedingungen, es fängt das event an und verhindert das Standardverhalten.

Der einzige Nachteil ist, dass es diese Richtlinie für alle Anker-tags. Also, wenn Sie haben eine Menge von Anker-tags auf der Seite und Sie nur wollen, um zu verhindern, dass das default-Verhalten für eine kleine Zahl von Ihnen, dann ist diese Richtlinie ist nicht sehr effizient. Aber ich will fast immer zu preventDefaultso dass ich mit dieser Richtlinie alle in meinem AngularJS apps.

InformationsquelleAutor der Antwort tennisgent

315

Entsprechend der docs für ngHref Sie sollten in der Lage zu verlassen aus der href oder tun href="".

<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />

InformationsquelleAutor der Antwort Chris

229

Übergeben Sie den $event-Objekt der Methode, und rufen Sie $event.preventDefault() auf, so dass die Standard-Verarbeitung nicht auftreten:
```
<a href="#" ng-click="do($event)">Click</a>

//then in your controller.do($event) method
$event.preventDefault()
```
InformationsquelleAutor der Antwort mna
107

Bevorzuge ich Richtlinien für diese Art der Sache. Hier ist ein Beispiel
```
<a href="#" ng-click="do()" eat-click>Click Me</a>
```
Sowie die Richtlinie code für eat-click:
```
module.directive('eatClick', function() {
    return function(scope, element, attrs) {
        $(element).click(function(event) {
            event.preventDefault();
        });
    }
})
```
Nun können Sie die eat-click - Attribut auf jedes element, und es wird preventDefault()'ed automagisch.

Vorteile:
1. Sie nicht haben, um passieren die hässliche $event Objekt in do() Funktion.
2. Dem controller ist mehr unit-testbar, da es nicht braucht, stub, die $event Objekt
InformationsquelleAutor der Antwort djsmith
53

Obwohl Renaud gab eine große Lösung
```
<a href="#" ng-click="do(); $event.preventDefault()">Click</a> 
```
Ich persönlich fand Sie auch brauchen, $event.stopPropagation() in einigen Fällen zu vermeiden, einige der Nebenwirkungen
```
<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">
    Click</a>
```
wird meine Lösung

InformationsquelleAutor der Antwort zainengineer
33
```
ng-click="$event.preventDefault()"
```
InformationsquelleAutor der Antwort The Whiz of Oz
33

Die einfachste Lösung, die ich gefunden habe, ist diese :
```
<a href="#" ng-click="do(); $event.preventDefault()">Click</a>
```
InformationsquelleAutor der Antwort Clément Renaud
10

Also das Lesen durch diese Antworten, @Chris hat immer noch die meisten "richtigen" Antwort, nehme ich an, aber Sie hat ein problem, es zeigt nicht den "Zeiger"....

So, hier sind zwei Möglichkeiten, um dieses problem zu lösen, ohne dass fügen Sie eine cursor:pointer Stil:
1. Verwenden javascript:void(0) statt #:
```
<a href="javascript:void(0)" ng-click="doSomething()">Do Something</a>
```
2. Verwenden $event.preventDefault() im ng-click Richtlinie (damit Sie nicht junk-bis Sie Ihren controller mit DOM-zugehörige Referenzen):
```
<a href="#dontGoHere" ng-click="doSomething(); $event.preventDefault()">Do Something</a>
```
Ich persönlich bevorzuge die erstere über die letztere. javascript:void(0) hat andere Vorteile, die sind diskutiert hier. Es ist auch Diskussion von "unobtrusive JavaScript" in diesem link, ist erschreckend aktuell und nicht unbedingt direkt bei einem Winkel Anwendung.

InformationsquelleAutor der Antwort Ben Lesh
9

Können Sie das wie folgt tun

1.Entfernen href Attribut von Anker(a) tag

2.Setze pointer cursor in css ng klicken Sie auf Elemente
```
 [ng-click],
 [data-ng-click],
 [x-ng-click] {
     cursor: pointer;
 }
```
InformationsquelleAutor der Antwort Fizer Khan

HTML

hier rein angularjs: in der Nähe von ng-click-Funktion können Sie schreiben, die preventDefault () - Funktion durch Semikolon trennen

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">Click me</a>

$scope.do = function() {
    alert("do here anything..");
}

(oder)

können Sie auf diese Weise Vorgehen, ist dies bereits diskutiert einige hier.

HTML

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

$scope.do = function(event) {
    event.preventDefault();
    event.stopPropagation()
}

InformationsquelleAutor der Antwort vallepu veerendra kumar

5

Da Sie eine web-app, warum brauchst du links?

Tauschen Ihre Anker zu Tasten!
```
<button ng-click="do()"></button>
```
InformationsquelleAutor der Antwort sidonaldson

falls noch relevant:

<a ng-click="unselect($event)" />

...

scope.unselect = function( event ) {
 event.preventDefault();
 event.stopPropagation();
}

...

InformationsquelleAutor der Antwort xac

5

Versuchen, diese option, die ich sehen kann, ist noch nicht oben aufgeführt :
```
<a href="" ng-click="do()">Click</a>
```
InformationsquelleAutor der Antwort pollux1er
4

Ich würde gehen mit:
```
<a ng-click="do()">Click</a>
```
- denn laut den docs Sie sollten in der Lage zu verlassen, den href und dann Eckig um die Verhinderung Standard für Sie!
Ganzen dies zu verhindern Standard-Sache wurde verwirrend für mich, so habe ich eine JSFiddle
es veranschaulicht, Wann und wo Winkel verhindert, dass Standard -.

Dem JSFiddle ist mit Angular ist eine Richtlinie - so sollte es sein, GENAU das gleiche. Sehen Sie den source-code hier: ein tag source code

Ich hoffe das hilft weiter-Klärung für einige.

Hätte ich gerne post-doc zu ngHref aber ich kann nicht wegen meinem Ruf.

InformationsquelleAutor der Antwort martinmose
4

Dies ist, was ich immer tun. Funktioniert wie ein Charme!
```
<a href ng-click="do()">Click</a>
```
InformationsquelleAutor der Antwort Catfish
3

Benötigen oder wenn Sie inline, können Sie dies tun:
```
<a href="#" ng-click="show = !show; $event.preventDefault()">Click to show</a>
```
InformationsquelleAutor der Antwort ntekka
3

Ist der sicherste Weg, um zu vermeiden, von Ereignissen auf ein "href" wäre zu definieren als
```
<a href="javascript:void(0)" ....>
```
InformationsquelleAutor der Antwort Michael Drob
2

Viele Antworten scheinen zu viel des guten. BEI MIR klappt das
```
 <a ng-href="#" ng-click="$event.preventDefault();vm.questionContainer($index)">{{question.Verbiage}}</a>
```
InformationsquelleAutor der Antwort Tom Stickel
1

Ich brauche eine Anwesenheit von href-Attribut der Wert für den Abbau (wenn js ausgeschaltet ist), so kann ich nicht mit leeren href-Attribut (oder "#"), aber der code oben hat bei mir nicht funktioniert, denn ich brauche ein Ereignis (e) - variable. Ich habe meine eigene Richtlinie:
```
angular.module('MyApp').directive('clickPrevent', function() {
  return function(scope, element, attrs) {
    return element.on('click', function(e) {
      return e.preventDefault();
    });
  };
});
```
In HTML:
```
<a data-click-prevent="true" href="/users/sign_up" ng-click="openSignUpModal()">Sign up</a>
```
InformationsquelleAutor der Antwort focused

Kreditaufnahme von tennisgent Antwort. Ich mag, dass Sie nicht zum erstellen einer benutzerdefinierten Richtlinie auf hinzufügen, auf allen links. Aber ich couldnt seine arbeiten in IE8. Hier ist, was schließlich für mich gearbeitet (mit eckigen 1.0.6).

Feststellen, dass "binden" können Sie verwenden, jqLite zur Verfügung gestellt von Winkel-so dass keine Notwendigkeit, wrap mit voller jQuery. Auch die stopPropogation Methode.

.directive('a', [
    function() {
        return {
            restrict: 'E',
            link: function(scope, elem, attrs) {

                elem.bind('click', function(e){
                    if (attrs.ngClick || attrs.href === '' || attrs.href == '#'){
                        e.preventDefault();
                        e.stopPropagation();
                    }
                })
            }
        };
    }
])

InformationsquelleAutor der Antwort Lukus

1

Ich lief in das gleiche Problem bei der Verwendung von Dübeln für eine angular bootstrap-Dropdown. Die einzige Lösung, die ich gefunden, die vermieden, unerwünschte Nebenwirkungen (dh. das drop-down nicht schließen, weil der Verwendung von " preventDefault ()") wurde um die folgenden:
```
 <a href="javascript:;" ng-click="do()">Click</a>
```
InformationsquelleAutor der Antwort cjackson
1

wenn Sie nie wollen, gehen Sie zu "href" ... sollten Sie Ihre markup und verwenden Sie eine Taste, nicht ein Anker-tag ein, denn semantisch ist es nicht ein Anker oder link. Umgekehrt, wenn Sie haben eine Taste, macht ein paar Prüfungen, und dann leitet es sollte eine link - /anchor-tag und nicht eine Taste... für SEO-Zwecke als auch Test [insert test-suite hier].

für die links, die Sie nur wollen, um die Umleitung bedingt, wie aufgefordert, die änderungen zu speichern, oder erkennen schmutzigen Zustand... Sie verwenden sollten, ng-click="someFunction($event)" und in someFunction auf Ihre validationError preventDefault und oder stopPropagation.

auch nur weil Sie können bedeutet nicht, sollten Sie. javascript:void(0) arbeitete auch wieder in den Tag... aber wegen der ruchlosen Hacker/Cracker Browser-flag-apps/Webseiten, die javascript verwenden, innerhalb eines href... sehe keinen Grund zu ducktype oben..

im Jahr 2016 seit 2010 sollte kein Grund sein, überall zu verwenden links, die wirken wie buttons... wenn Sie noch Unterstützung IE8 und unten, die Sie brauchen, um neu zu bewerten Ihrem Unternehmen.

InformationsquelleAutor der Antwort PDA

/* NG CLICK PREVENT DEFAULT */

app.directive('ngClick', function () {
    return {
        link: function (scope, element, attributes) {
            element.click(function (event) {
                event.preventDefault();
                event.stopPropagation();
            });
        }
    };
});

InformationsquelleAutor der Antwort

0

Was Sie tun sollten, ist das weglassen der href Attribut völlig.

Wenn man sich die Quellcode für die a element-Direktive (das ist ein Teil des Winkel-core), heißt es in Zeile 29 - 31:
```
if (!element.attr(href)) {
    event.preventDefault();
}
```
Was bedeutet, Winkel bereits an der Lösung des Problems von links ohne href. Die einzige Frage, die Sie noch haben, ist das css-problem. Sie können das Zeiger-Stil-Anker, ng-Klicks, z.B.:
```
a[ng-click] {
    /* Styles for anchors without href but WITH ng-click */
    cursor: pointer;
}
```
So, man könnte sogar machen Sie Ihre Website zugänglich Kennzeichnung echte links mit einem feinen, verschiedenen styling dann links, die Funktionen durchzuführen.

Happy coding!

InformationsquelleAutor der Antwort Justus Romijn
-2

Eine alternative könnte sein:
```
<span ng-click="do()">Click</span>
```
InformationsquelleAutor der Antwort Terence Bandoian

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.