Ik wil een eenvoudige JavaScript-functie met één klik uitvoeren zonder enige omleiding.

Is er enig verschil of voordeel tussen het plaatsen van de JavaScript-aanroep in het href attribuut (zoals dit:

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

) versus het in het onclick-kenmerk plaatsen (binden aan de onclick-gebeurtenis)?

Antwoord 1, autoriteit 100%

Het plaatsen van de onclick binnen de href zou beledigend zijn voor degenen die sterk geloven in het scheiden van inhoud van gedrag/actie. Het argument is dat uw html-inhoud uitsluitend gericht moet blijven op inhoud, niet op presentatie of gedrag.

Het gebruikelijke pad tegenwoordig is om een ​​javascript-bibliotheek (bijv. jQuery) te gebruiken en een gebeurtenishandler te maken met behulp van die bibliotheek. Het zou er ongeveer zo uitzien:

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

Antwoord 2, autoriteit 98%

slecht:

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

goed:

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

beter:

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

nog beter 1:

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

nog beter 2:

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

Waarom beter? omdat return false zal voorkomen dat de browser de link volgt

beste:

Gebruik jQuery of een ander soortgelijk framework om de onclick-handler te koppelen aan de ID van het element.

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

Antwoord 3, autoriteit 24%

In termen van javascript is één verschil dat het sleutelwoord this in de handler onclick verwijst naar het DOM-element waarvan de onclick attribuut het is (in dit geval het <a> element), terwijl this in het href attribuut verwijst naar het window object.

In termen van presentatie, als een href-attribuut ontbreekt in een link (dwz <a onclick="[...]">) dan zullen browsers standaard de text-cursor weergeven (en niet de vaak gewenste pointer-cursor), aangezien deze de <a> als anker, en niet als link.

In termen van gedrag, bij het specificeren van een actie door navigatie via href, ondersteunt de browser doorgaans het openen van die href in een apart venster met behulp van een snelkoppeling of contextmenu. Dit is niet mogelijk wanneer u een actie alleen specificeert via onclick.

Als u zich echter afvraagt ​​wat de beste manier is om dynamische actie te krijgen door op een DOM-object te klikken, dan is het toevoegen van een gebeurtenis met javascript los van de inhoud van het document de beste manier om te gaan. Je zou dit op een aantal manieren kunnen doen. Een gebruikelijke manier is om een ​​javascript-bibliotheek zoals jQuery te gebruiken om een ​​gebeurtenis te binden:

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

Antwoord 4, autoriteit 5%

Ik gebruik

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

Een lange weg maar het klaart de klus. gebruik een A-stijl om te vereenvoudigen
dan wordt het:

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

Antwoord 5, autoriteit 4%

Naast alles hier, wordt de href weergegeven in de statusbalk van de browser, en klik op niet. Ik vind het niet gebruiksvriendelijk om daar javascript-code te tonen.

Antwoord 6, autoriteit 4%

Het beste antwoord is een zeer slechte gewoonte, je mag nooit een link naar een lege hash gebruiken, omdat dit later problemen kan veroorzaken.

Het beste is om een ​​gebeurtenishandler aan het element te binden, zoals veel andere mensen hebben gezegd, maar <a href="javascript:doStuff();">do stuff</a> werkt perfect in elke moderne browser en ik gebruik het veelvuldig bij het renderen van sjablonen om te voorkomen dat ik voor elke instantie opnieuw moet binden. In sommige gevallen biedt deze aanpak betere prestaties. YMMV

Nog een interessant weetje….

onclick & href hebben ander gedrag bij het rechtstreeks aanroepen van javascript.

onclick geeft this context correct door, terwijl href dat niet doet, of met andere woorden <a href="javascript:doStuff(this)">no context</a> werkt niet, terwijl <a onclick="javascript:doStuff(this)">no context</a> zal.

Ja, ik heb de href weggelaten. Hoewel dat niet aan de specificaties voldoet, werkt het in alle browsers, hoewel het idealiter een href="javascript:void(0);" voor een goede maatregel

moet bevatten.

Antwoord 7, autoriteit 3%

de beste manier om dit te doen is met:

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

Het probleem is dat hierdoor een hash (#) aan het einde van de pagina-URL in de browser wordt toegevoegd, waardoor de gebruiker twee keer op de terug-knop moet klikken om naar de pagina vóór de jouwe te gaan. Als u dit in overweging neemt, moet u wat code toevoegen om de verspreiding van gebeurtenissen te stoppen. De meeste javascript-toolkits hebben hier al een functie voor. De dojo-toolkit gebruikt bijvoorbeeld

dojo.stopEvent(event);

om dit te doen.

Antwoord 8, autoriteit 3%

Dit werkt

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

Antwoord 9, autoriteit 3%

Het hebben van javascript: in een attribuut dat niet specifiek voor scripting is, is een verouderde HTML-methode. Hoewel het technisch gezien werkt, wijst u nog steeds javascript-eigenschappen toe aan een niet-scriptkenmerk, wat geen goede gewoonte is. Het kan zelfs mislukken in oude browsers, of zelfs sommige moderne (een gegoogled forumbericht leek erop te wijzen dat Opera niet van ‘javascript:’ url’s houdt).

Een betere methode zou de tweede manier zijn, om uw javascript in het onclick attribuut te plaatsen, dat wordt genegeerd als er geen scriptfunctionaliteit beschikbaar is. Plaats een geldige URL in het href-veld (meestal ‘#’) voor terugval voor degenen die geen javascript hebben.

Antwoord 10, autoriteit 3%

het werkte voor mij met deze regel code:

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

Antwoord 11, autoriteit 2%

Persoonlijk vind ik het vervelend om javascript-aanroepen in de HREF-tag te plaatsen. Ik let er meestal niet echt op of iets een javascript-link is of niet, en vaak wil ik dingen in een nieuw venster openen. Wanneer ik dit probeer te doen met een van dit soort links, krijg ik een lege pagina met niets erop en javascript in mijn locatiebalk. Dit wordt echter een beetje omzeild door een onlick te gebruiken.

Antwoord 12, autoriteit 2%

Ten eerste is het het beste om de url in href te hebben, omdat het gebruikers in staat stelt om links te kopiëren, in een ander tabblad te openen, enz.

In sommige gevallen (bijv. sites met frequente HTML-wijzigingen) is het niet praktisch om elke keer dat er een update is, links te binden.

Typische bindmethode

Normale link:

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

En zoiets voor JS:

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

De voordelen van deze methode zijn een zuivere scheiding van opmaak en gedrag en het is niet nodig om de functieaanroepen in elke link te herhalen.

Geen bindmethode

Als u echter niet elke keer wilt binden, kunt u onclick gebruiken en het element en de gebeurtenis doorgeven, bijvoorbeeld:

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

En dit voor JS:

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

Het voordeel van deze methode is dat je nieuwe links kunt inladen (bijvoorbeeld via AJAX) wanneer je maar wilt, zonder dat je je elke keer zorgen hoeft te maken over binding.

Antwoord 13

Nog één ding dat me opviel bij het gebruik van “href” met javascript:

Het script in het kenmerk “href” wordt niet uitgevoerd als het tijdsverschil tussen 2 klikken vrij kort was.

Probeer bijvoorbeeld het volgende voorbeeld uit te voeren en dubbelklik (snel!) op elke link.
De eerste link wordt slechts één keer uitgevoerd.
De tweede link wordt twee keer uitgevoerd.

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

Gereproduceerd in Chrome (dubbelklik) en IE11 (met drievoudige klik).
Als u in Chrome snel genoeg klikt, kunt u 10 klikken maken en slechts 1 functie uitvoeren.

Firefox werkt goed.

Antwoord 14

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

Antwoord 15

Ik heb ondervonden dat de javascript: hrefs niet werkte toen de pagina was ingesloten in de webpaginafunctie van Outlook waar een e-mailmap is ingesteld om in plaats daarvan een url weer te geven

Antwoord 16

<a href="#" onclick="try{FUNCTION_YOU_WANT()}catch(e){}return false">click here</a>

Antwoord 17

Dit werkt ook

<a (click)='myFunc()'>Click Here </a>

(onclick) werkte niet voor mij in een Angular-project met bootstrap.