Rufen Sie die Javascript-Funktion beim Klicken auf einen Hyperlink auf


Antworten:


133

Noch ordentlicher, anstelle des typical href="#"oder href="javascript:void"oder href="whatever", denke ich, dass dies viel sinnvoller ist:

var el = document.getElementById('foo');
el.onclick = showFoo;


function showFoo() {
  alert('I am foo!');
  return false;
}

<a href="no-javascript.html" title="Get some foo!" id="foo">Show me some foo</a>

Wenn Javascript fehlschlägt, gibt es einige Rückmeldungen. Darüber hinaus wird unregelmäßiges Verhalten (Seitenspringen bei href="#", Besuch derselben Seite bei href="") beseitigt.


13
+1 Dies ist derzeit die einzige unauffällige Antwort. +100 wenn ich könnte.
James

@ Lewis, ja, idealerweise würden <a> -Tags nicht für reine JS-Aufrufe verwendet, aber ältere Browser haben dies leider nicht unterstützt: Hover für Nicht-Link-Elemente. Daher wurden häufig Links verwendet, um js-Ereignisse auszulösen.
Chris Van Opstal

@ Chris - Ich bin nicht sicher, ob Sie meinen Standpunkt verstehen, Chris. Ich schlage vor, dass Sie nicht <a href="#"> Nichts tun </a> und stattdessen <a href="a/link/somwhere.html"> Etwas tun </a> verwenden und dann verwenden progressive Verbesserung, um die href zu überschreiben. Dies ist die sauberste Lösung. Anker sind in Ordnung, aber sie sollten ETWAS tun, wenn Javascript deaktiviert ist - oder aus irgendeinem Grund (gemäß IE6) ist Javascript kaputt gegangen, bevor der Handler erstellt und zugewiesen wurde. Auf diese Weise sind alle Ihre Benutzer zufrieden.
Lewis

2
Funktioniert bei mir nicht, führt beim Laden der Seite nur automatisch die On-Click-Funktion aus. Dies scheint auch ein Albtraum zu sein, wenn es um Zugänglichkeit geht.
Shawn Solomon

4
Dies funktioniert nicht, es leitet Sie nur zur href-URL.
Paddotk

56

Die einfachste Antwort von allen ist ...

<a href="javascript:alert('You clicked!')">My link</a>

Oder um die Frage nach dem Aufruf einer Javascript-Funktion zu beantworten:

<script type="text/javascript">
function myFunction(myMessage) {
    alert(myMessage);
}
</script>

<a href="javascript:myFunction('You clicked!')">My link</a>


2
Der Link im StackOverflow 'Code-Snippet ausführen' funktioniert in Firefox nicht (es wird keine Warnung erstellt), aber in FF, wenn ich diese Art von Link auf eine normale Webseite setze.
the_pwner224

Ja, es ist seltsam, es hat bei mir funktioniert, jetzt ist es nicht mehr so. Andere hatten ähnliche Probleme und es scheint keine endgültige Lösung zu geben, abgesehen von der vollständigen Neuinstallation von Firefox.
Jayden Lawson

26

Mit dem Parameter onclick ...

<a href='http://www.google.com' onclick='myJavaScriptFunction();'>mylink</a>

verwirrende Aussage. Wird es auf google.com gehen oder die Javascript-Funktion aufrufen? Welches hat die Priorität?
Nguai al

12

Die JQuery-Antwort. Da JavaScript für die Entwicklung von JQuery erfunden wurde, gebe ich Ihnen in JQuery ein Beispiel dafür:

<div class="menu">
    <a href="http://example.org">Example</a>
    <a href="http://foobar.com">Foobar.com</a>
</div>

<script>
jQuery( 'div.menu a' )
    .click(function() {
        do_the_click( this.href );
        return false;
    });

// play the funky music white boy
function do_the_click( url )
{
    alert( url );
}
</script>

51
JavaScript wurde erfunden, um jQuery? Das ist neu!
Palswim

34
Dies war wie das Lesen, dass Lego erfunden wurde, um Lego Batman zu bauen.
Shawn Solomon

4
@ ShawSolomon Ich bin froh, dass wir uns einig sind :)
Elcuco

1
@elcuco, großer Sarkasmus! + 'd :) Es lebe JQuery
Zuul

6

Ich bevorzuge die Onclick-Methode anstelle der href für Javascript-Hyperlinks. Verwenden Sie immer Warnungen, um festzustellen, welchen Wert Sie haben.

<a href='#' onclick='jsFunction();alert('it works!');'>Link</a>

Es kann auch für Eingabe-Tags verwendet werden, z.

<input type='button' value='Submit' onclick='jsFunction();alert('it works!');'>


3

Im Idealfall würde ich es vermeiden, Links in Ihrem Code zu generieren, da Ihr Code jedes Mal neu kompiliert werden muss, wenn Sie das 'Markup' jedes dieser Links ändern möchten. Wenn Sie es tun müssen, würde ich Ihre Javascript-Aufrufe nicht in Ihr HTML einbetten. Es ist insgesamt eine schlechte Praxis. Ihr Markup sollte Ihr Dokument beschreiben, nicht das, was es tut. Das ist die Aufgabe Ihres Javascript.

Verwenden Sie einen Ansatz, bei dem Sie für jedes Element eine bestimmte ID haben (oder eine Klasse, wenn die gemeinsame Funktionalität vorhanden ist), und fügen Sie dann mithilfe der progressiven Verbesserung die Ereignishandler hinzu, z.

[c# example only probably not the way you're writing out your js]
Response.Write("<a href=\"/link/for/javascriptDisabled/Browsers.aspx\" id=\"uxAncMyLink\">My Link</a>");

[Javascript]  
document.getElementById('uxAncMyLink').onclick = function(e){

// do some stuff here

    return false;
    }

Auf diese Weise wird Ihr Code für Benutzer mit deaktiviertem JS nicht beschädigt und es gibt eine klare Trennung von Bedenken.

Hoffe das ist von Nutzen.


1
Warum C #? Warum nicht einfach <a href="https://stackoverflow.com/link/for/javascriptDisabled/Browsers.aspx" id="uxAncMyLink">My Link</a>?
Mahmoodvcs

2

Ich würde generell empfehlen, element.attachEvent (IE) oder element.addEventListener (andere Browser) zu verwenden, anstatt das Ereignis onclick direkt festzulegen, da letzteres alle vorhandenen Ereignishandler für dieses Element ersetzt.

Mit attachEvent / addEventListening können mehrere Ereignishandler erstellt werden.


1

Verwenden Sie das onclickHTML-Attribut .

Der onclickEreignishandler erfasst ein Klickereignis über die Maustaste des Benutzers auf das Element, auf das das onclickAttribut angewendet wird. Diese Aktion führt normalerweise zu einem Aufruf einer Skriptmethode wie einer JavaScript-Funktion [...]


1

Wenn Sie nicht auf das Laden der Seite warten, können Sie das Element nicht anhand der ID auswählen. Diese Lösung sollte für alle funktionieren, die Probleme haben, den Code auszuführen

<script type="text/javascript">
window.onload = function() {
    document.getElementById("delete").onclick = function() {myFunction()};

    function myFunction() {
        //your code goes here
        alert('Alert message here');
    }
};
</script>

<a href='#' id='delete'>Delete Document</a>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.