Aufruf der Javascript-Funktion bei Hyperlink-Klick

Ich erstelle dynamisch einen Hyperlink in der C#-Code-Behind-Datei von ASP.NET. Ich muss eine JavaScript-Funktion beim Client-Klick aufrufen. wie bewerkstellige ich das?

Ordentlicher noch, statt der typical href="#" oder href="https://stackoverflow.com/questions/1265887/javascript:void" oder href="https://stackoverflow.com/questions/1265887/whatever"ich denke, das macht viel mehr Sinn:

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


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

<a href="https://stackoverflow.com/questions/1265887/no-javascript.html" title="Get some foo!" id="foo">Show me some foo</a>

Wenn Javascript fehlschlägt, gibt es ein Feedback. Weiterhin kann fehlerhaftes Verhalten (Seitensprünge bei href="#"Besuch derselben Seite im Fall von href="") wird eliminiert.

Die einfachste Antwort von allen ist …

<a href="https://stackoverflow.com/questions/1265887/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="https://stackoverflow.com/questions/1265887/javascript:myFunction("You clicked!')">My link</a>

Mit dem onclick-Parameter…

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

Die JQuery-Antwort. Da JavaScript erfunden wurde, um JQuery zu entwickeln, gebe ich Ihnen ein Beispiel in JQuery, das dies tut:

<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>

Ich bevorzuge die Verwendung der Onclick-Methode anstelle der Href für Javascript-Hyperlinks. Und verwenden Sie immer Warnungen, um festzustellen, welchen Wert Sie haben.

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

Es könnte auch auf Input-Tags verwendet werden, z.

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

Idealerweise würde ich es vermeiden, Links in Ihrem Code dahinter zu generieren, da Ihr Code jedes Mal neu kompiliert werden muss, wenn Sie eine Änderung am ‘Markup’ jedes dieser Links vornehmen 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 was es tut, das ist die Aufgabe Ihres Javascripts.

Verwenden Sie einen Ansatz, bei dem Sie eine bestimmte ID für jedes Element (oder jede Klasse, wenn es sich um eine gemeinsame Funktionalität handelt) haben, und verwenden Sie dann Progressive Enhancement, um die Event-Handler hinzuzufügen, etwa so:

[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 wird eine klare Trennung von Bedenken geben.

Hoffe das nützt.

Verwenden Sie die onclick HTML-Attribut.

Das onclick Event-Handler erfasst ein Klick-Ereignis von der Maustaste des Benutzers auf das Element, auf das die
onclick Attribut angewendet wird. Diese Aktion führt normalerweise zu einem Aufruf einer Skriptmethode, z. B. einer JavaScript-Funktion […]