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

Ich erstelle dynamisch einen Hyperlink im C # -Code hinter der Datei von ASP.NET. Ich muss beim Klicken auf den Client eine JavaScript-Funktion aufrufen. Wie schaffe ich das?

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.

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>

Mit dem Parameter onclick ...

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

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>

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!');'>

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.

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.

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 [...]

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>