chiamare la funzione javascript al clic sul collegamento ipertestuale

Sto creando dinamicamente un collegamento ipertestuale nel codice c # dietro il file di ASP.NET. Devo chiamare una funzione JavaScript al clic del client. come posso farlo?

Ancora più ordinato, invece di typical href="#"o href="javascript:void"o href="whatever", penso che questo abbia molto più senso:

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>

Se Javascript fallisce, c'è un feedback. Inoltre, vengono eliminati comportamenti irregolari (salti di pagina nel caso di href="#", visita della stessa pagina nel caso di href="").

La risposta più semplice di tutte è ...

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

O per rispondere alla domanda su come chiamare una funzione javascript:

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

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

Con il parametro onclick ...

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

La risposta di JQuery. Poiché JavaScript è stato inventato per sviluppare JQuery, ti sto dando un esempio in JQuery facendo questo:

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

Preferisco usare il metodo onclick piuttosto che l'href per i collegamenti ipertestuali javascript. E usa sempre gli avvisi per determinare quale valore hai.

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

Potrebbe essere utilizzato anche sui tag di input, ad es.

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

Idealmente, eviterei del tutto di generare collegamenti nel codice in coda poiché il codice dovrà essere ricompilato ogni volta che si desidera apportare una modifica al "markup" di ciascuno di quei collegamenti. Se devi farlo, non incorporerei le tue "chiamate" javascript nel tuo HTML, è una cattiva pratica del tutto, il tuo markup dovrebbe descrivere il tuo documento non quello che fa, questo è il lavoro del tuo javascript.

Utilizza un approccio in cui hai un ID specifico per ogni elemento (o classe se la sua funzionalità comune) e quindi utilizza Progressive Enhancement per aggiungere i gestori di eventi, qualcosa come:

[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;
    }

In questo modo il tuo codice non si interromperà per gli utenti con JS disabilitato e avrà una chiara separazione delle preoccupazioni.

Spero che sia utile.

In genere consiglierei di utilizzare element.attachEvent (IE) o element.addEventListener (altri browser) invece di impostare direttamente l'evento onclick poiché quest'ultimo sostituirà qualsiasi gestore di eventi esistente per quell'elemento.

attachEvent / addEventListening consentono la creazione di più gestori di eventi.

Usa l' onclickattributo HTML .

Il onclickgestore eventi acquisisce un evento clic dal pulsante del mouse degli utenti sull'elemento a cui onclickè applicato l' attributo. Questa azione di solito si traduce in una chiamata a un metodo di script come una funzione JavaScript [...]

Se non aspetti che la pagina venga caricata non potrai selezionare l'elemento per id. Questa soluzione dovrebbe funzionare per chiunque abbia problemi a ottenere il codice da eseguire

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