Vyhledávání na webu

JavaScript - href vs onclick pro zpětné volání funkce na hypertextovém odkazu

Chci spustit jednoduchou JavaScriptovou funkci při kliknutí bez jakéhokoli přesměrování.

Existuje nějaký rozdíl nebo výhoda při umístění volání JavaScriptu do atributu href (takhle):

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

vs. vložením do atributu onclick (připojení k události onclick)?

Odpověď č. 1

špatný:

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

dobré:

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

lepší:

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

ještě lepší 1:

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

ještě lepší 2:

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

Proč lepší? protože return false zabrání prohlížeči následovat odkaz

nejlepší:

Použijte jQuery nebo jiný podobný framework k připojení obsluhy onclick podle ID prvku.

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

Odpověď č. 2

Umístění onclick uvnitř href by uráželo ty, kteří silně věří v oddělení obsahu od chování/akce. Argumentem je, že váš HTML obsah by měl zůstat zaměřen pouze na obsah, nikoli na vzhled nebo chování.

Typickou cestou v těchto dnech je použít knihovnu JavaScriptu (např. jQuery) a vytvořit obslužnou rutinu událostí pomocí této knihovny. Vypadalo by to nějak takto:

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

Odpověď č. 3

Pokud jde o javascript, jedním rozdílem je, že klíčové slovo this v obsluze onclick bude odkazovat na DOM prvek, jehož atribut onclick je (v tomto případě prvek <a>), zatímco this v atributu href bude odkazovat na objekt window.

Z hlediska prezentace, pokud odkaz postrádá atribut href (tj. <a onclick="[...]">), prohlížeče ve výchozím nastavení zobrazí kurzor text (a nikoli často žádoucí kurzor pointer), protože odkaz <a> považují za kotevní bod, nikoli za odkaz.

Pokud jde o chování, při určení akce pomocí navigace přes href prohlížeč obvykle podporuje otevření tohoto href v samostatném okně buď pomocí zkratky, nebo kontextového menu. To není možné při určení akce pouze přes onclick.

Nicméně, pokud se ptáte, jaký je nejlepší způsob, jak získat dynamickou akci při kliknutí na DOM objekt, pak připojení události pomocí JavaScriptu odděleně od obsahu dokumentu je nejlepší způsob, jak to provést. To můžete udělat několika způsoby. Běžným způsobem je použít knihovnu JavaScriptu, jako je jQuery, k vazbě události:

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

Odpověď č. 4

Nejlepší odpověď je velmi špatná praxe, nikdy by se nemělo odkazovat na prázdný hash, protože to může později způsobit problémy.

Nejlepší je připojit obslužnou rutinu události k prvku, jak uvedlo mnoho dalších lidí, nicméně <a href="javascript:doStuff();">do stuff</a> funguje perfektně ve všech moderních prohlížečích a používám ho hojně při vykreslování šablon, abych se vyhnul nutnosti znovu připojovat pro každou instanci. V některých případech tento přístup nabízí lepší výkon. Vaše zkušenosti se mohou lišit.

Další zajímavá drobnost....

onclick a href mají odlišné chování při přímém volání JavaScriptu.

onclick předá kontext this správně, zatímco href ne, nebo jinými slovy <a href="javascript:doStuff(this)">bez kontextu</a> nebude fungovat, zatímco <a onclick="javascript:doStuff(this)">bez kontextu</a> bude.

Ano, vynechal jsem href. I když to nesplňuje specifikaci, bude to fungovat ve všech prohlížečích, ačkoli ideálně by mělo obsahovat href="javascript:void(0);" pro jistotu

Odpověď č. 5

UPOZORNĚNÍ EDITORA: Podívejte se na komentáře, použití 'nohref' je v této odpovědi nesprávné.

Používám

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

Dlouhá cesta, ale práce je hotová. Použijte styl A pro zjednodušení, pak to bude:

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

Odpověď č. 6

nejlepší způsob, jak to udělat, je s:

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

Problém je v tom, že to TOTO přidá znak hash (#) na konec URL stránky v prohlížeči, což vyžaduje, aby uživatel klikl na tlačítko zpět dvakrát, aby se dostal na stránku před vaší. Vzhledem k tomu je potřeba přidat nějaký kód pro zastavení propagace události. Většina javascriptových sad nástrojů již bude mít pro to funkci. Například sady nástrojů Dojo používají

dojo.stopEvent(event);

to tak učinit.

Odpověď č. 7

Kromě všeho zde je href zobrazeno na stavovém řádku prohlížeče, a onclick ne. Myslím, že není uživatelsky přívětivé zobrazovat tam JavaScriptový kód.

Odpověď č. 8

To funguje

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

Související články