Voglio eseguire una semplice funzione JavaScript su un clic senza alcun reindirizzamento.

C'è qualche differenza o vantaggio tra l'inserimento della chiamata JavaScript hrefnell'attributo (come questo:

<a href="javascript:my_function();window.print();">....</a>

) vs. metterlo onclicknell'attributo (vincolandolo onclickall'evento)?

Inserire il clic all'interno dell'href offenderebbe coloro che credono fortemente nella separazione dei contenuti dal comportamento / azione. L'argomento è che il tuo contenuto html dovrebbe rimanere concentrato esclusivamente sul contenuto, non sulla presentazione o sul comportamento.

Il percorso tipico in questi giorni è usare una libreria javascript (es. Jquery) e creare un gestore di eventi usando quella libreria. Sarebbe simile a:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

cattivo:

<a id="myLink" href="javascript:MyFunction();">link text</a>

bene:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

meglio:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

ancora meglio 1:

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

ancora meglio 2:

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

Perché meglio? perché return falseimpedirà al browser di seguire il collegamento

migliore:

Utilizzare jQuery o un altro framework simile per collegare il gestore onclick dall'ID dell'elemento.

$('#myLink').click(function(){ MyFunction(); return false; });

In termini di JavaScript , unica differenza è che la thisparola chiave nel onclickgestore farà riferimento all'elemento DOM cui onclickattributo è (in questo caso l' <a>elemento), mentre thisnel hrefattributo farà riferimento alla windowoggetto.

In termini di presentazione , se un hrefattributo è assente da un collegamento (ad es. <a onclick="[...]">), Per impostazione predefinita, i browser visualizzeranno il textcursore (e non il pointercursore spesso desiderato ) poiché tratta l' <a>ancora e non un collegamento.

In termini di comportamento , quando si specifica un'azione tramite la navigazione href, il browser in genere supporterà l'apertura hrefin una finestra separata utilizzando un collegamento o un menu di scelta rapida. Ciò non è possibile quando si specifica un'azione solo tramite onclick.

Tuttavia, se stai chiedendo qual è il modo migliore per ottenere un'azione dinamica dal clic di un oggetto DOM, collegare il tuo evento tramite javascript separato dal contenuto del documento è il modo migliore per procedere. Potresti farlo in diversi modi. Un modo comune è utilizzare una libreria javascript come jQuery per associare un evento:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
    $('a#link').click(function(){ /* ... action ... */ })
</script>

Io uso

Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>

Molto lontano ma fa il lavoro. usa uno stile A per semplificare, poi diventa:

<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>

Oltre a tutto qui, l'href viene mostrato sulla barra di stato del browser e non fare clic su. Penso che non sia facile mostrare lì il codice javascript.

il modo migliore per farlo è con:

<a href="#" onclick="someFunction(e)"></a>

Il problema è che questo aggiungerà un hash (#) alla fine dell'URL della pagina nel browser, richiedendo così all'utente di fare clic due volte sul pulsante Indietro per andare alla pagina prima della tua. Considerando ciò, è necessario aggiungere del codice per interrompere la propagazione degli eventi. La maggior parte dei toolkit javascript avrà già una funzione per questo. Ad esempio, utilizza il dojo toolkit

dojo.stopEvent(event);

fare così.

La risposta migliore è una brutta pratica, non si dovrebbe mai collegarsi a un hash vuoto in quanto può creare problemi lungo la strada.

La cosa migliore è legare un gestore di eventi all'elemento, come hanno affermato numerose altre persone, tuttavia <a href="javascript:doStuff();">do stuff</a>funziona perfettamente in ogni browser moderno e lo uso ampiamente durante il rendering dei modelli per evitare di dover ricollegare per ogni istanza. In alcuni casi, questo approccio offre prestazioni migliori. YMMV

Un'altra interessante novità ...

onclicke hrefhanno comportamenti diversi quando si chiama direttamente JavaScript.

onclickpasserà il thiscontesto correttamente, mentre hrefnon funzionerà, o in altre parole <a href="javascript:doStuff(this)">no context</a>non funzionerà, mentre<a onclick="javascript:doStuff(this)">no context</a> farà.

Sì, ho omesso il href. Anche se questo non segue le specifiche, funzionerà in tutti i browser, anche se idealmente dovrebbe includere una href="javascript:void(0);"buona misura

Avere javascript:in qualsiasi attributo che non è specificamente per lo scripting è un metodo obsoleto di HTML. Mentre tecnicamente funziona, stai ancora assegnando proprietà javascript a un attributo non script, il che non è una buona pratica. Può anche fallire sui vecchi browser, o anche su quelli moderni (un post su un forum su Google sembra indicare che Opera non ama 'javascript:' url).

Una pratica migliore sarebbe il secondo modo, per inserire il tuo javascript onclicknell'attributo, che viene ignorato se non è disponibile alcuna funzionalità di scripting. Inserisci un URL valido nel campo href (comunemente '#') per il fallback per coloro che non hanno JavaScript.

ha funzionato per me usando questa riga di codice:

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>

Questo funziona

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>

Personalmente, trovo fastidioso inserire chiamate javascript nel tag HREF. Di solito non prendo davvero attenzione al fatto che qualcosa sia o meno un collegamento javascript, e spesso volte voglio aprire le cose in una nuova finestra. Quando provo a farlo con uno di questi tipi di collegamenti, ottengo una pagina vuota senza nulla e javascript nella mia barra degli indirizzi. Tuttavia, questo viene evitato un po 'usando un clic.

Un'altra cosa che ho notato usando "href" con javascript:

Lo script nell'attributo "href" non verrà eseguito se la differenza di tempo tra 2 clic era piuttosto breve.

Ad esempio, prova a eseguire l'esempio seguente e fai doppio clic (veloce!) Su ciascun collegamento. Il primo collegamento verrà eseguito una sola volta. Il secondo collegamento verrà eseguito due volte.

<script>
function myFunc() {
    var s = 0;
    for (var i=0; i<100000; i++) {
        s+=i;
    }
    console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>

Riprodotto in Chrome (doppio clic) e IE11 (con triplo clic). In Chrome se fai clic abbastanza velocemente puoi fare 10 clic e avere solo 1 funzione di esecuzione.

Firefox funziona bene.

Innanzitutto, hrefè meglio avere l'URL perché consente agli utenti di copiare collegamenti, aprire in un'altra scheda, ecc.

In alcuni casi (ad es. Siti con frequenti modifiche HTML) non è pratico associare i collegamenti ogni volta che si verifica un aggiornamento.

Metodo di associazione tipico

Collegamento normale:

<a href="https://www.google.com/">Google<a/>

E qualcosa del genere per JS:

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

I vantaggi di questo metodo sono la netta separazione tra markup e comportamento e non devono ripetere le chiamate di funzione in ogni collegamento.

Metodo No Bind

Se non vuoi vincolarti ogni volta, tuttavia, puoi usare onclick e passare l'elemento e l'evento, ad esempio:

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

E questo per JS:

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

Il vantaggio di questo metodo è che puoi caricare nuovi collegamenti (ad es. Tramite AJAX) ogni volta che vuoi senza doversi preoccupare di rilegare ogni volta.

 <hr>
            <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
            <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
            <div class="pull-right">
                <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
            </div>
        </div>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                });
            </script>   
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                });
            </script>   

Ho riscontrato che il javascript: hrefs non funzionava quando la pagina era incorporata nella funzionalità della pagina Web di Outlook in cui è impostata una cartella di posta per mostrare un URL