2009-08-12 24 views
69

Sto creando dinamicamente un collegamento ipertestuale nel codice C# dietro il file di ASP.NET. Devo chiamare una funzione JavaScript sul clic del client. come posso realizzare questo?call javascript function on hyperlink click

+0

possibile duplicato di [Come utilizzare un Link a chiamata JavaScript?] (Http://stackoverflow.com/questions/688196/how-to- use-a-link-to-call-javascript) – Trilarion

risposta

112

Neater ancora, al posto del typical href="#" o href="javascript:void" o href="whatever", penso che questo rende 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 non funziona, c'è qualche feedback. Inoltre, il comportamento irregolare (salto della pagina nel caso di href="#", visitando la stessa pagina nel caso di href="") viene eliminato.

+13

+1 Questa è attualmente l'unica risposta non invadente. +100 se potessi. – James

+0

@Chris - Non sono sicuro che tu abbia capito il mio punto di vista, Chris. Sto suggerendo di non utilizzare Do nothing e utilizzare invece Do something e quindi utilizzare l'ottimizzazione progressiva per sovrascrivere l'href. Questa è la soluzione più pulita. Le ancore vanno bene, ma dovrebbero fare QUALCOSA se javascript è disabilitato - o per qualche ragione (come in IE6) alcuni javascript si sono rotte prima che il gestore fosse creato e assegnato. In questo modo tutti i tuoi utenti sono felici. – Lewis

20

Con il parametro onclick ...

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

Utilizzare la onclick HTML attribute.

Il gestore di eventi onclick cattura un evento clic da parte degli utenti pulsante del mouse sull'elemento a cui è applicato l'attributo onclick. Questo azione di solito si traduce in una chiamata a un metodo sceneggiatura come una funzione JavaScript [...]

4

Idealmente, eviterei di generare collegamenti in tutto il codice, poiché il codice dovrà essere ricompilato ogni volta che si desidera apportare una modifica al "markup" di ciascuno di questi collegamenti. Se devi farlo, non incorporo le "chiamate" di 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.

Utilizzare un approccio in cui si dispone di un ID specifico per ogni elemento (o classe, se la sua funzionalità comune) e quindi utilizzare Progressive Enhancement per aggiungere il gestore di eventi (s), qualcosa di simile:

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

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

Spero che sia utile.

+0

Perché C#? Perché non solo "My Link"? – Mahmoodvcs

2

In generale, si consiglia di utilizzare element.attachEvent (IE) o element.addEventListener (altri browser) per impostare direttamente l'evento onclick in quanto quest'ultimo sostituirà eventuali gestori di eventi esistenti per quell'elemento.

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

13

La risposta di JQuery. Dal momento che è stato inventato JavaScript al fine di sviluppare JQuery, io vi do un esempio in JQuery fare 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> 
+44

JavaScript è stato inventato per sviluppare jQuery? Questo è uno nuovo! – palswim

+29

Questo è stato come leggere che Lego è stato inventato per costruire Lego Batman. –

+4

@ShawnSolomon Sono felice che siamo d'accordo :) – elcuco

4

Io preferisco usare il metodo onclick piuttosto che il 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>

Può essere utilizzato anche su tag input ad es.

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

43

La risposta più semplice di tutti è ...

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

O, per rispondere alla domanda di chiamare una funzione javascript:

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

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

+7

Sei una benedizione inviata per aiutare i programmatori non javascript. grazie Jayden! – Fattie

+0

Questo non sembra funzionare in firefox – Anthony

+0

Anthony sembra funzionare bene in Firefox. –

0

Se non si attende il caricamento della pagina, non sarà possibile selezionare l'elemento tramite ID. Questa soluzione dovrebbe funzionare per chiunque abbia difficoltà a raggiungere 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>