HTML-Ankerlink - href und onclick beide?

92

Ich möchte ein Ankertag erstellen, das JavaScript ausführt und dann dorthin geht, wo hrefes aufgenommen wurde. Das Aufrufen einer Funktion, die mein JavaScript ausführt und dann window.locationoder top.locationan den hrefSpeicherort setzt, funktioniert bei mir nicht.

Stellen Sie sich vor, ich habe ein Element mit der ID "Foo" auf der Seite. Ich möchte einen Anker ähnlich dem folgenden verfassen:

<a href="#Foo" onclick="runMyFunction(); return false;">Do it!</a>

Wenn Sie darauf klicken, möchte ich runMyFunction ausführen und dann zu der Seite springen #Foo(kein erneutes Laden verursachen - die Verwendung top.locationwürde dazu führen, dass die Seite neu geladen wird ).

Vorschläge? Ich bin glücklich, jQuery zu verwenden, wenn es hier helfen kann ...

javascript jquery html anchor Psychotik
quelle

return true;ist die Lösung, aber Sie können auch anrufen location.hash = '#Foo'. Die Seite wird nicht neu geladen.

Shuangwhywhy

130

Nur return truestattdessen?

Der Rückgabewert aus dem onClickCode bestimmt, ob die inhärente angeklickte Aktion des Links verarbeitet wird oder nicht. Zurückgeben falsebedeutet, dass sie nicht verarbeitet wird. Wenn Sie jedoch zurückkehren, verarbeitet trueder Browser sie, nachdem Ihre Funktion zurückgekehrt ist, und wechselt zur richtigen Anker.

Bernstein
quelle

1

Was ist, wenn onclick nichts zurückgibt?

Maciek

1

@maciek dann wird der Rückgabewert undefinedals falsch für diese Zwecke behandelt.

Amber

1

Wenn ich in der Vergangenheit eine js-Funktion zum Starten einer neuen Seite verwendet und nur ein "#" für das href-Attribut eingefügt habe, habe ich "-1" zurückgegeben, um die Standardaktion zu verhindern, bei der es sich normalerweise um das Springen des Browsers handelt Ganz oben auf der Seite, oder manchmal würde ich einfach nichts zurückgeben. In letzter Zeit musste ich alle diese Seiten überarbeiten, wie @Amber empfohlen hat ... um speziell false zurückzugeben, wenn ich nicht möchte, dass die Seite springt.

Randy

1

@Amber scheint, wenn onclick nichts zurückgibt, wird die inhärente angeklickte Aktion des Links verarbeitet.

iplus26

Außerdem sollten Sie event.preventDefault () nicht für den Click-Event-Handler verwenden.

Ruben

36

<a href="#Foo" onclick="return runMyFunction();">Do it!</a>

und

function runMyFunction() {
  //code
  return true;
}

Auf diese Weise wird Ihre Funktion ausgeführt UND Sie folgen dem Link UND Sie folgen dem Link genau, nachdem Ihre Funktion erfolgreich ausgeführt wurde.

n1313
quelle

1

Scheint nicht zu funktionieren, wenn Ihre Funktion nach einem verzögerten Funktionsaufruf true zurückgibt?

DavidVdd

7

Wenn der Link den Speicherort nur ändern soll, wenn die Funktionsausführung erfolgreich ist, tun onclick="return runMyFunction();"Sie dies und in der Funktion würden Sie true oder false zurückgeben.

Wenn Sie nur die Funktion ausführen und dann das Ankertag seine Aufgabe ausführen lassen möchten, entfernen Sie einfach die return falseAnweisung.

Als Randnotiz sollten Sie stattdessen wahrscheinlich einen Ereignishandler verwenden, da Inline-JS keine sehr optimale Methode ist, um Dinge zu tun.

Peirix
quelle

0

Wenn Sie eine saubere HTML-Struktur erstellen, können Sie diese verwenden.

//Jquery Code
$('a#link_1').click(function(e){
  e . preventDefault () ;
  var a = e . target ;
  window . open ( '_top' , a . getAttribute ('href') ) ;
});

//Normal Code
element = document . getElementById ( 'link_1' ) ;
element . onClick = function (e) {
  e . preventDefault () ;
  
  window . open ( '_top' , element . getAttribute ('href') ) ;
} ;

<a href="#Foo" id="link_1">Do it!</a>

Erweitern Sie das Snippet

Carl James Omandam
quelle

HTML-Ankerlink - href und onclick beide?

Antworten: