Risposte:
<a onclick="jsfunction()" href="#">o
<a onclick="jsfunction()" href="javascript:void(0);">Modificare:
La risposta di cui sopra non è davvero una buona soluzione, avendo imparato molto su JS da quando ho pubblicato inizialmente. Vedere la risposta di EndangeredMassa di seguito per l'approccio migliore alla risoluzione di questo problema.
JavaScript discreto, nessuna dipendenza dalla libreria:
<html>
<head>
<script type="text/javascript">
// Wait for the page to load first
window.onload = function() {
//Get a reference to the link on the page
// with an id of "mylink"
var a = document.getElementById("mylink");
//Set code to run when the link is clicked
// by assigning a function to "onclick"
a.onclick = function() {
// Your code here...
//If you don't want the link to actually
// redirect the browser to another page,
// "google.com" in our example here, then
// return false at the end of this block.
// Note that this also prevents event bubbling,
// which is probably what we want here, but won't
// always be the case.
return false;
}
}
</script>
</head>
<body>
<a id="mylink" href="http://www.google.com">linky</a>
</body>
</html>hrefse non voglio reindirizzare l'utente e voglio solo eseguire un po 'di codice? Edit: vedo che può essere vuoto a sinistra: href="".
onclickevento tramite window.onload, anziché inserire onclickdirettamente il <a>tag?
<a href="javascript:alert('Hello!');">Clicky</a>EDIT, anni dopo: NO! Non farlo mai! Ero giovane e stupido!
Modifica, di nuovo: un paio di persone hanno chiesto perché non dovresti farlo. Ci sono un paio di motivi:
Presentazione: HTML dovrebbe concentrarsi sulla presentazione. Inserire JS in un HREF significa che il tuo HTML ora, in un certo senso, ha a che fare con la logica aziendale.
Sicurezza: Javascript nel tuo HTML in questo modo viola le norme sulla sicurezza dei contenuti (CSP) . Content Security Policy (CSP) è un ulteriore livello di sicurezza che aiuta a rilevare e mitigare determinati tipi di attacchi, tra cui Cross-Site Scripting (XSS) e attacchi di iniezione di dati. Questi attacchi vengono utilizzati per tutto, dal furto di dati alla defacement del sito o alla distribuzione di malware. Leggi di più qui .
Accessibilità: i tag di ancoraggio servono per il collegamento ad altri documenti / pagine / risorse. Se il tuo link non va da nessuna parte, dovrebbe essere un pulsante . Ciò rende molto più facile per gli screen reader, i terminali braille, ecc. Determinare cosa sta succedendo e fornire agli utenti ipovedenti informazioni utili.
href='#'e alert()dentro onclick?
E, perché non discreto con jQuery:
$(function() {
$("#unobtrusive").click(function(e) {
e.preventDefault(); // if desired...
// other methods to call...
});
});HTML
<a id="unobtrusive" href="http://jquery.com">jquery</a>Javascript discreto presenta molti vantaggi, ecco i passaggi da seguire e perché è buono da usare.
il collegamento si carica normalmente:
<a id="DaLink" href="http://host/toAnewPage.html"> fai clic qui </a>
questo è importante perché funzionerà per i browser con javascript non abilitato o se c'è un errore nel codice javascript che non funziona.
javascript viene eseguito al caricamento della pagina:
window.onload = function(){
document.getElementById("DaLink").onclick = function(){
if(funcitonToCall()){
// most important step in this whole process
return false;
}
}
}se il javascript viene eseguito correttamente, magari caricando il contenuto della pagina corrente con javascript, il ritorno false annulla l'attivazione del collegamento. in altre parole, mettere return false ha l'effetto di disabilitare il collegamento se il javascript è stato eseguito correttamente. Consentendo al contempo di eseguirlo se il javascript non lo fa, fare un bel backup in modo che il contenuto venga visualizzato in entrambi i modi, per i motori di ricerca e se il codice si rompe o viene visualizzato su un sistema non javascript.
il miglior libro sull'argomento è "Dom Scription" di Jeremy Keith
Oppure, se stai usando PrototypeJS
<script type="text/javascript>
Event.observe( $('thelink'), 'click', function(event) {
//do stuff
Event.stop(event);
}
</script>
<a href="#" id="thelink">This is the link</a>basato sull'uso della risposta @mister_lucky con jquery:
$('#unobtrusive').on('click',function (e) {
e.preventDefault(); //optional
//some code
});Codice HTML:
<a id="unobtrusive" href="http://jquery.com">jquery</a>basta usare javascript: ---- esempio
javascript:var JFL_81371678974472 = new JotformFeedback({ formId: '81371678974472', base: 'https://form.jotform.me/', windowTitle: 'Photobook Series', background: '#e44c2a', fontColor: '#FFFFFF', type: 'false', height: 700, width: 500, openOnLoad: true })